Communication Patterns in Angular

How data flows in Angular

Bhargav Bachina
May 30, 2019 · 9 min read

Example Project

// clone the project
git clone https://github.com/bbachi/angular-communication.git
// install all the dependencies and start the project
npm install
npm start

Component basics

composition of components

Module

app.module.ts

Component

app.component.ts
index.html

Interpolation

<h1>
Welcome to {{ title }}!
</h1>

Property Binding

<app-header [title]="title"></app-header>

Event Binding

<app-header (click)="updateHeader()"></app-header>

Parent to child communication

parent to child communication
export class AppComponent {
title = 'angular-communication';
}
app and header component
output

Child to Parent Communication

child to parent communication
clicking on nav links showing in the app component
header.component.ts
app component

Sibling communication with services

sibling communication with services
Initial login state
logged-in state
app.service.ts
footer.component.html

Sibling communication with EventEmitter

Sibling Communication with EventEmitter
app component
footer.component.ts

Communication using @ViewChild decorator

Communication using ViewChild Decorator
Parent Component
Child Component
Output

Communication using content projection

<app-welcome-message>
<h2>Welcome to APP!</h2>
</app-welcome-message>
<div>
<ng-content></ng-content>
</div>
app.component.html
output with content projection

Communication with NGRX store

Communication With NGRX Store

Communication with NGRX Store in detail

Data Flow With NGRX Store
{
"type":"LOGIN",
"payload": data
}
example of action creators
example of reducers
subscription to the store from component

Communication between modules

NGRX Store

Communication among modules with NGRX Store

Shared module

Communication among modules with shared module

Summary

Conclusion

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store