Content Projection with ng-content (Tutorial 36)
Content Projection is one of the most useful feature of angular that helps you to build reusable components.
Sometimes the nature of a component means that the consumer would like to customise the view, the presentation of data, in a unique way for each use case.
We have learnt how to pass data from parent component to child component using @Input and @Output decorator , but that is only limited to pass data from parent to child and child to parent.
Learn about these topics which I have used in this video
@Input decorator: • Communicate from Parent to Child Comp...
@Ouput decorator: • Communicate from Child to Parent Comp...
*ngFor directive: • NgFor Directive - Angular(Tutorial #9)
ng-content is a predefined directive in angular that is used to implement content projection in angular, if we add ng-content anywhere in our template of our component, the inner content of tags that define our component are then projected on this place.
To implement multiple content projection ,select attribute can be used. You need to pass the selector name(id, class, element selector) in select attribute, then only with that template will projected to that placeholder which has that selector.
RxJS Subject: • RxJS Subject | What is RxJs Subject ...
RxJS BehaviorSubject : • BehaviorSubject | BehaviorSubject vs ...
RxJS Replay Subject: • ReplaySubject | ReplaySubject vs Beha...
Angular Subject and BehaviorSubjet: • Subject and BehaviorSubject | Compone...
Promises vs Observables: • Promises vs Observables - Angular (Tu...
Promises vs Observables shorts: • Promise vs Observable | Difference be...
DON'T CLICK HERE: https://shorturl.at/AFGJT
This code is available on github:
https://github.com/nishaSingla/Angula...
This Book will help you to understand angular more: https://amzn.to/3f1nf9q
I have used below FAKE API in demo to illustrate the AsyncSubject:
https://restcountries.eu/rest/v2/name...
►Subscribe Now: / nishasingla 🔔 Stay updated!
Watch complete playlist here: • Introduction- Angular (Tutorial #1)
Follow us on:
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0
Instagram: / passion4code
#contentprojection #ngcontent #nishasingla
