Is it possible to customize the content of a reusable header section based on the current route data in Angular? The header currently displays a title and description pulled from the route data property.
My concern is how to dynamically inject different HTML content into the header depending on the activated route. I am aware of using ng-content but this would involve embedding the header component in every child component, which is not ideal as the header exists outside of the main router outlet.
This is the layout of the elements in relation to the router outlet:
<app-navbar></app-navbar>
<app-header></app-header>
<app-alert></app-alert>
<router-outlet #route="outlet"></router-outlet>
This is the structure of the header:
<div class="title">
<div class="title-text">
<h1>{{ data?.title }}</h1>
<p>{{ data?.description }}</p>
</div>
<ng-content>Here is where I would like to inject HTML from child component</ng-content
</div>
Below is an example of the type of content I want to inject:
<label class="select" for="product-selection">Products</label>
<select class="select" id="product-selection" placeholder="Product" [(ngModel)]="selectedProduct" (change)="onProductChanged()">
<option *ngFor="let product of products" [value]="product.id">{{ product.name }}</option>
</select>