Build a reactive Chat App UI with Angular Signals

Source Code:

In this video, I will show you how to build a chat application's UI using Angular's new Signal API. I demonstrate how to create dynamic messages using signals, pass data between components with inputs and outputs, and implement two-way data binding with effects.

I explain how to add new messages to the chat by providing text from the input component to the parent component using a model input. You'll see how to listen for changes to this model with an effect and update the messages array. I also show how to delete messages by emitting an output and filtering the array.

By the end, you'll understand how to use signals, inputs, outputs, and effects together in Angular. Learn how components can communicate dynamically through signals to build fully-functional reactive applications. Join me to build this chat app and level up your Angular skills!

This video is great as an Angular practice project. It also covers the latest angular features including the input method, the model inputs, the effects, and the output method introduced in Angular 17.3. If you ask me, these are one of the most important topics about modern Angular.

Timeline:
00:00:00 - Introduction
00:00:40 - Cloning the repo and set up
00:02:22 - Rendering the messages dynamically
00:10:52 - Adding new messages
00:24:14 - Moving the scroll to bottom when adding messages
00:26:56 - Deleting messages

Hashtags:
#angular #AngularChatApp #AngularSignals #ReactiveProgramming #angular17 #angulartutorial #angulartutorialforbeginners

[HarshiniK-xx]

Why we are using signals specifically ? Why don't we use normal variables and decorators. In what way signals are helping here rather than using the normal variables. I want to know the difference. Please let me know that. This video really helps a lot, Thanks :)

[mahdiandalib]

thx man, plz create a news website using angular and nestjs with admin panel

[abdulsohailit]

Always you provide the valuable content. love you bro