Scribd
Upload
2 views1 page

Angular Component Communication Guide

The document explains the concept of components in UI, highlighting that they are reusable parts that can be nested within each other. It details how to create components using Angular commands and describes communication methods between parent and child components, specifically through @Input and content projection. Examples are provided to illustrate how data is passed from parent to child components in both methods.

Uploaded by

kumargpc7
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views1 page

Angular Component Communication Guide

The document explains the concept of components in UI, highlighting that they are reusable parts that can be nested within each other. It details how to create components using Angular commands and describes communication methods between parent and child components, specifically through @Input and content projection. Examples are provided to illustrate how data is passed from parent to child components in both methods.

Uploaded by

kumargpc7
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

Component: Component is the reusable part of the UI(user Interface).

Components can
be kept one inside another called nested component.
To create a component command is:
ng generate component component-name

Nested Components: component Inside another component is called Nested Components


eg: //[Link]
<app-movie></app-movie>

Here app-movie is the child component and [Link] is parent component

Communication between the components:


components can send data from parent to child or child to parent or any other
components too.
Parent to child:
Parent component can send data to child component in two ways
i. @Input
ii. content projection

i.@Input() :
Parent component can send data to child components as attributes/properties but
those values are received by Child components using @Input() decorator

//[Link]
<app-details name="prasad" age="28" ></app-details>
<app-details name="shekhar" age="54" ></app-details>
<app-details name="suresh" age="49" ></app-details>

//[Link]
@Input() name='';
@Input() age=0;

//[Link]
<div>
<h2>{{name}}</h2>
<p>{{age}}</p>
</div>

ii. content-projection: it allows parent component to project some content into


child components template directly using ng-content element
//[Link]
<app-details>
<h2>Prasad</h2>
<p>28</p>
</app-details>
<app-details>
<h2>shekhar</h2>
<p>54</p>
</app-details>

//[Link]
<ng-content></ng-content>

You might also like