CODEWITHSUNDEEP
angulartypescriptlayout
Viatorus
Viatorus

Reputation: 1903

Placing custom icons in page header

My project base is ngx-rocket.

There, the page header is an own component with buttons to navigate through the content pages (home, about, etc...) and a drop-down menu.

I would like to add a button to the page header for a custom content page component.

But I don't know how.

I mean, I could add the button to the header.component.html but this does not seem right, because this would affect all content pages (and how would I manage the component interaction on button click?).

What is a common practice to do this?

Upvotes: 0

Views: 494

Answers (2)

Viatorus
Viatorus

Reputation: 1903

I use CdkPortal now, which does exactly what I want and need.

With the help of this tutorial and this example I was able to place an button inside my header without changing any project structure.

Upvotes: 0

Bálint Réthy
Bálint Réthy

Reputation: 433

Probably you want to use <ng-content></ng-content> inside your header.component.html and in the content pages u can write something like this:

...
<app-header>
  <ul class="xy-content-page-header-menu">
    <li><a routerLink="...">Content page specific link</a></li>
    ....
  </ul>
</app-header>
...

On the other hand it allows you to use only one block of content that you can merge into your header component.

If there is more individual blocks to add then you need to use ngTemplateOutlet (https://angular.io/api/common/NgTemplateOutlet) or vcr.createEmbeddedView with angular templates. Example 1:

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

Inside your header.component.html:

<ng-container *ngTemplateOutlet="inputTemplate, context: { $implicit: some_data_data_for_element_object_outside }"></ng-container>

Example 2 (create custom structural directive (https://angular.io/guide/structural-directives) so you can query it in header.component.ts, you can use this in the prev example too if you want):

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

So you can query it and render into DOM in your header.component.ts (You need to know what ContentChild and ViewChild is 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_data_for_element_object_outside)
}
...

Hope it helps :)

Upvotes: 1

Related Questions