In this video we will discuss content projection in Angular with an example.

Text version of the video
[ Ссылка ]

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
[ Ссылка ]

Slides
[ Ссылка ]

Angular CRUD Tutorial
[ Ссылка ]

Angular CRUD Tutorial Text Articles & Slides
[ Ссылка ]

All Dot Net and SQL Server Tutorials in English
[ Ссылка ]

All Dot Net and SQL Server Tutorials in Arabic
[ Ссылка ]

Content projection helps us create reusable components. In Angular 1, this is called transclusion. Let us understand content projection, with an example. We want to create a reusable accordion type of control. The panel heading must be clickable, and when clicked the panel body and footer must be collapsed. Clicking on the panel heading again, must expand the collapsed panel body and footer.

Another important requirement is, this accordion panel must be reusable with any other component in our application. The component that uses this accordion panel component, must be able to specify what content it wants in the accordion panel body and footer.

For example, if we use this accordion panel, with a ProductComponent that displays a product, then in the accordion panel body, the ProductComponent may want to project and display product image, price, weight etc. In the footer, the ProductComponent may want to project and display buttons to customise the product or buy.

In our case we want to use this accordion panel, with DisplayEmployeeComponent. So in the panel body we want to project and display, employee photo, gender, date of birth, email etc. In the footer, we want to project and display buttons to View, Edit and Delete employee.

So the important question that we need to answer is, how will the components that use this accordion component be able to inject variable content into the acoordion panel body and footer.
By using ng-content tag.

You can think of this ng-content as a place holder for the variable content. In a bit we will understand, how a component that uses this accordion component can project variable content depending on the requirements of your application.

свернуть