To integrate dynamic content in your header component, consider using the
<ng-content></ng-content>
tag within your header.component.html file. In your content pages, you can then include specific blocks of code like this:
...
<app-header>
<ul class="xy-content-page-header-menu">
<li><a routerLink="...">Content page specific link</a></li>
....
</ul>
</app-header>
...
This approach allows for incorporating a single block of content that can be merged into your header component.
If there are multiple individual blocks to add, consider utilizing ngTemplateOutlet (https://angular.io/api/common/NgTemplateOutlet) or vcr.createEmbeddedView with Angular templates. Here is an example:
<app-header [inputTemplate]="menu">
<ng-template #menu let-element>
<ul class="xy-content-page-header-menu">
<li><a routerLink="...">Content page specific link {{element.data}}</a></li>
....
</ul>
</ng-template>
</app-header>
In your header.component.html file:
<ng-container *ngTemplateOutlet="inputTemplate, context: { $implicit: some_data_for_element_object }"></ng-container>
You can also create a custom structural directive (https://angular.io/guide/structural-directives) as shown in Example 2, allowing you to query it in header.component.ts:
<app-header>
<ul class="xy-content-page-header-menu" *myStructuralDirective="let element">
<li><a routerLink="...">Content page specific link {{element.data}}</a></li>
....
</ul>
</app-header>
This enables querying and rendering into the DOM in your header.component.ts using ContentChild and ViewChild. Check out the difference between @ViewChild and @ContentChild here: What's the difference between @ViewChild and @ContentChild?
@Component...{
...
@ContentChild(MyStructuralDirective) menu:MyStructuralDirective;
@ViewChild('whereTheMenuGoes', {read: ViewContainerRef}) elementVcr: ViewContainerRef;
...
someRenderFunction(){
this.elementVcr.createEmbeddedView(menu._template, this.some_data_for_element_object)
}
...
I hope this explanation proves helpful :)