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!

[AshokaJayasekara]

You are explaining the concept very clearly!

[bullet]

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

[ArifMatubber-kmnv]

Thank so much for the clearest explanation

[venkatesh-wy]

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

[phileze_]

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

[ahmedm_seada]

That's a very great example . Thanks

[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.

[narenk]

Why your not said this is content projection?

[boyddede]

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?

[codewithdoge]

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