Placing custom icons in page header

Question

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?

score 1 · Answer 1 · answered Mar 08 '19 at 10:02

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

Thank you very much for your fast answer. I try it out. On think what comes in my mind is that by default the [shell component](https://github.com/ngx-rocket/generator-ngx-rocket/blob/master/generators/app/templates/src/app/shell/__bootstrap.shell.component.html) wraps the header and content as siblings... — Viatorus, Mar 09 '19 at 19:31

score 0 · Accepted Answer · answered Mar 09 '19 at 22:12

0

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.

answered Mar 09 '19 at 22:12

Viatorus

1,804
1
18
41

Placing custom icons in page header

2 Answers2