Communication Patterns in Angular

How data flows in Angular

Photo by Nick Fewings on Unsplash

Angular follows a two-way data flow pattern, meaning you can send data up and down the component tree. As everything in the Angular is a component, understanding communication between components is crucial for every successful Angular project.

In this post, I will cover all the ways we can communicate between components. These are the topics we will go through:

• Example Project
• Component Basics
• Parent to Child Communication
• Child to Parent Communication
• Sibling Communication With Services
• Sibling Communication With EventEmitter
• Communication Using @ViewChild Decorator
• Communication Using Content Projection
• Communication With NGRX Store
• Communication Between Modules
• Summary
• Conclusion

Example Project

Here is the example project, so you can see all the communication in action. You can clone this project to test it on your machine.

// clone the project
git clone https://github.com/bbachi/angular-communication.git