Angular, Inject an Input from a Component into my header

Question

I want for my Pages induvidually to inject different components from other Pages/Components into the header. For example I want to inject an Input search Field from my content-component into my header Component. I tried with ng-Content, but this only duplicates my header in my HTML. The problem is my header is not in each Component individually, its in my app.component.

My Header Component:

<div class="header__sub">
<div class="header__title header__title--sub">
    <h2 class="title title--medium">{{ subtitle }}</h2>
</div>
<div class="header__search">
    <!-- Here should be my Input field -->
    <ng-content></ng-content>
</div>

Component from I want to inject the input field:

<app-header>
   <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" />
   </mat-form-field>
</app-header>  
 ....

App-Component.html:

<mat-drawer-content>
    // The header
    <app-header-sub>
    </app-header-sub>
    <div class="content__inner">
        // My Content
        <router-outlet></router-outlet>
    </div>
</mat-drawer-content>

How can I inject from each Component individually a different tag into the header (with functionalities)?

You don't. Use a service (@Injectable) for that. Inject the service into your component and into your header. Set the value on your service and retrieve it in your header. — pascalpuetz, Jan 07 '20 at 15:32

score 1 · Answer 1 · answered Jan 07 '20 at 15:39

You can use it like that:

Child component

<div class="header">
  <ng-content select="[name]"></ng-content>
<div>

Parent component

<app-header>
  <div name>Hello World</div>
</app-header>

Demo for your reference: https://stackblitz.com/edit/ng-content-select-attribute

Or look here: Multiple ng-content

Angular, Inject an Input from a Component into my header

1 Answers1