angulartypescriptng-templateng-content

Access element replaced with ng-content

I've tried to create some tabs component that some how can be used like Angular Material Component.

But the solution I've made is not right and is buggy

I've used document.getElementsByTagName('app-tab')

This is tabs component template

enter image description here

This is the way it used

enter image description here

I wanted to access app-tab label attribute value, but don't know how to access it from app-tabs, that used ng-content Thank you so much in advance

The Answer

This is called content projection

Detailed introduction can be found here

https://blog.angular-university.io/angular-ng-content/

Solution

  • You can access it by using @ContentChild or @ContentChildren decorators. you can read about them here :-

    https://angular.io/api/core/ContentChildren

    https://angular.io/api/core/ContentChild