Summary Communication of Component in Angular

Communication
between components
in Angular
A Complete guidance with understandable examples




ImamHussain – (4 years of experience in Angular Development )

, Communicate between components in Angular


We have several ways to communicate of components in Angular. We
will see commonly ways to implement them with code example.

1.Parent-to-Child Communication (Input() Property):

Parent components can pass data to child components using input
properties. The child component receives the data as an input and can
use it in its template or logic.

Parent Component:

1. import { Component } from '@angular/core';
2.
3. @Component({
4. selector: 'app-parent',
5. template: `<h2>Parent Component</h2>
6. <app-child [message]="parentMessage"></app-child>`
7. })
8.
9. export class ParentComponent {
10. parentMessage = 'Message from parent component';
11. }


Child Component:

1. import { Component, Input } from '@angular/core';
2.
3. @Component({
4. selector: 'app-child',
5. template: `<h4>Child Component</h4>
6. <p>{{ message }}</p>`
7. })
8.
9. export class ChildComponent {
10. @Input() message: string;
11. }




In this example, the parent component (ParentComponent) passes
the parentMessage property value to the child component
(ChildComponent) using the input property [message]. The child
component can access the value through the message property.