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

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.

This code is available on github:

I have used below FAKE API in demo to illustrate the AsyncSubject:

Follow us on:

#contentprojection #ngcontent #nishasingla

[rahulmukherjee]

Most helpful video on content projection I could find in youtube. Thanks

[rojingharooni]

although your accent is hard for me to keep on, but because of your clean explanations and good examples I choose your tutorials over and over <3

[ashishchopra]

Very nicely explained. Exactly to the point. Thank you.

[daljeetsingh]

Thanks for the wonderful explanation,

[evanansh]

perfectly elaborate each term. Thank you very much for your contribution to my first Angular app :)

[kishorphawade]

I learned new concept this in angular, thanks for awesome videos, ur videos are easy to understand 😊

[kathiravanramaswamy]

Hi Nisha Singla this is useful content and very easy to understand.... Thanks for posting...

[abhinay]

Your only one youtuber to make crystal clear clarity hats off

[MrSonu]

Thank you so much Nisha. I went through so many tutorials but none of them explained the concepts the way you have explained in few mins.

[NileshGaikwad]

Thank you very much for the video, The way of your teaching is very clear and I will understand the concept

[shivramyadav]

Really good description about how to use content projection. keep it up.

[manoharanadimoolam]

It is very usfull lesson and you are a good teacher.

[tmhowbs]

Thank you for clear and good teaching skills

[kajol]

I won't have to make notes, I will remember since you explained it so well

[saicharan]

Thank you for providing such a butiful content

[ishagudhka]

You explained in very detailed manner. Thank you

[chiranjeevikadambala]

Hi Nisha, I appreciate the time you spent on Angular. Could You please explain the topics related to RxJS operators and NgRx. You can handle Angular complicated topics easily.

[compton]

I love your presentation style, and accent. Watching from South Africa.

[jilpatel]

Ma'am Very well explained. Make more videos series on Angular. Thank you!

[florianuhlmann]

Very well explained. right to the point. clear sentences.
I also liked that you covered the basics and a tiny bit more (I mean the select statement).
keep going.