ng-content in Angular | Directives | Angular 12+

The ng-content is used when we want to insert the content dynamically inside the component that helps to increase component reusability.
Using ng-content we can pass content inside the component selector and when angular parses that content that appears at the place of ng-content.
Let's understand the use of ng-content with an example.

[@arkoleini]

Great job! I watched ng-content in two other paid courses on Udemy and did not find it as much as simple and clear explanation you did

[@futurecodelab]

Thank you for equipping us with the knowledge and skills needed to master Angular development. Looking forward to diving deeper into this powerful framework with your guidance!

[@AshokaJayasekara19]

You are explaining the concept very clearly!

[@sohininandi9135]

crystal clear explanation. 👍

[@ArifMatubber-km4nv]

Thank so much for the clearest explanation

[@ahmedm_seada]

That's a very great example . Thanks

[@sona4612]

Wow ❤️❤️ what a clear explanation 🔥🔥

[@JamesCarlton-vc2vw]

Great explanation!

[@monayemhossain5356]

Awesome tutorial. Hats off.

[@klirmio21]

very high tier content tbh

[@afzalhossain4142]

what a teaching!! wow

[@maksat-mad]

Great video, thank you!

[@futurecodelab]

very clear

[@nijilnmk7775]

super explanation

[@muhidcs]

Great explanation, thanks!

[@bullet7553]

Thanks for this bu may we know if there is available source code so it would be much quicker to try?

[@venkatesh-w4y]

will this work when the child component has set the view encapsulation to shadow dom?

[@dimon.digital]

Thank you very much! 👍

[@beksultanomirzak9803]

omg thank you so much!

[@CHAIMASOMRANI]

thank you

[@phileze_]

HI there, is there a reason to use ng-content when you can use *ngfor and achieve the same with even lesser code?

[@ericculbertson1711]

I think having a "brand" variable within the product component, and then providing the 4 brands with an *ngfor is the best way to do this specific example. ng-content would be more flexible if you wanted to sometimes insert different kinds of components for each brand. (e.g. use h1 for iphone, h2 for Samsung, etc)

[@Premek00]

You can think of ng-content as creating a slot for content, where you can insert anything. You can insert , , or custom components and it will work fine.

[@yashkumarjani]

Helpful Video :)

[@SreekanthKaringula]

what's the use of ng-content still the same lines of code is used here, but the code place is changed into component selector, where is code reusability here.

[@ss_GOAT]

Thanks so much!

[@boydde3de]

So, when using ng-content I should not apply the styles of that content to the child component, but to the parent component that injects the content in the child? What if I want to predefine the style of the content in the child component to make it easier to re-use?

[@kabhishek4961]

Thank u..

[@narenk8077]

Why your not said this is content projection?

[@codewithdoge]

You're taking too much time on explaining css and html rather than directly talking about ng content

[@tsioryandrianarivony5437]

thank you