Create components whose reusable pieces are limited to just the external portions of the component, and the inner pieces could be different based on the needs of the application.
It enables developers to build reusable components.
`ng-content` directive in Angular
In AngularJS 1.x, it is implemented with the infamous transclusion
Why?
Its ability to change the content inside a component based on the needs of the application.
Reusability is very important when you're programming, and anything we can do to reduce duplication of code is going to help us out.
Content projection is an important concept when developing user interfaces. It allows us to project pieces of content into different places of the user interface of our application
Basic implementation
Use <ng-content></ng-content> directive inside the component to project your content
Projection slots
Projection on multiple places in a component
<ng-content select="[DOM query]"></ng-content>
ContentChild & ContentChildren
To project component
To access the projected component instance
Used with ngAfterContentInit
ViewChild & ViewChildren
The components inside the parent component view
Used with ngAfterViewInIt
Thank you :)
Content projection with Angular Zenab Saleem /zenabSaleemKhan /zenabKhan @ zenabSaleemKhan
