Learn to build a Reactive Chat App UI with Angular Signals

Hey everyone,

In my latest video tutorial, I show you how to create a fully functional and reactive chat application from scratch using Angular's new Signal API. This hands-on project is a great way to learn reactive programming concepts using the new Signals API in Angular.

We start by creating a dynamic messages array as a signal in the parent component. Then we pass this array into the child component for rendering using input binding. I demonstrate how to distinguish messages as sent/received by comparing IDs.

You'll see how to add new messages by emitting text from the input component back to the parent using a model. An effect listens for changes to this model and updates the messages array. I also cover deleting messages by emitting an output and filtering the array.

By the end of the video, you'll understand how to leverage signals, inputs, outputs, and effects to build highly interactive applications. The chat app is a practical example of components communicating through signals to update dynamically in real-time.

If you want to learn Angular's new reactive features while building a useful project, check out the full tutorial below 👇🏽. Let me know if you have any other questions!

Happy Coding,
Muhammad Ahsan Ayaz