Angular content projection

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.

[RonakBhatt]

This video explained beautifully about the concept of content projection. I was being asked in an interview about it but I was not sure about the concept of it. This video clears everything for me about this topic.

[billbortkevich]

Great video - you explain in 15 min concept that might take couple of hours using docs. And great real-world demo too. Many thanks

[nikhiltomar]

Thanks, man !! It's really a good stuff:)

[chetnajain]

Sir can you please tell how we can use the <app-accordion > tag in any other component and how to adjust the html template in the accordion.component.html so that only data that we want can be rendered , because I tried this technique in one of my project and it worked but now I have to use this accordion again in the same component and I am using another <app-accordion > tag in the same component and keeping its Html template in the accordion.component.html in a separate <div> but it is not working

Please help sir.
Thank You

[priyahariharan]

Hi, Thank you for the amazing videos! But I can't seem to get my bootstrap css working on panels like they were earlier. I browsed online and tried the new addition :host ::ng-deep in the css of display-component.css that got applied for other elements, but the basic classes: card-header, card-body and card-footer layouts are not generated once I change the accordion <ng-content> I am using Angular 10. Could you please help me with this problem?

[sourishdutta]

Hello Sir, Will you please a video series on node and express ?

[taherhendawi]

Hello Venkat, could you please make an example for save as button with angular?
By the way you are the best :)

[msdhoni]

Venkat bro we need ur videos please upload

[ayushagrawal]

I had gone through the code u used and it seems easy.
But the ng content is not working in any of the ways in my component.
Help me to fix this out.

[shahrukhjethra]

keep up Sir, if possible to make video for angular6 .
Thanks.

[bharadwaz]

Hi Sir, please make a video on Angular Internationalization, on multiple languages.

Thank you sir.