Angular6 transclusion / content projection: better conditional on wrapping html

Question

I want to render my rather simple component always with a default <ng-content> and optionally with a named ng-content. If that named ng-content exists, it should be wrapped by additional html. I did find a a solution, but annoyingly I need two references for it:

app.component.html (where it get's used)

<app-header> A minimal header </app-header> <hr> <app-header> A full header <h2 #two two>a subhead</h2> </app-header>

my component

import { Component, OnInit, ContentChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html' }) export class HeaderComponent { @ContentChild('two', {static: false}) twoRef: ElementRef; }

the header.component.html

<h4>default content</h4> <ng-content> </ng-content> <h4>named contents</h4> <div *ngIf="twoRef"> <b style="color: purple"> <ng-content select="[two]"></ng-content> </b> </div> <ng-template [ngIf]="twoRef">TWO exists B</ng-template>

Result is as expected, but I dislike the two attributes I need:

<h2 #two two>

→ is there a better way, to get along with just one reference / attrib ?

Andrei · Accepted Answer · 2020-02-13 18:54:18Z

1

you can do a helper empty directive and query it with ContentChild

@Directive({selector: '[two]'}) export class MyProjectionDirective {} .... @ContentChild(MyProjectionDirective) ref: MyProjectionDirective;

then only <h2 two> would be required to use that component

answered Feb 13, 2020 at 18:54

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank N Over a year ago

Working. thank you! But regrettable is, that I need to import specific Directive(s) to whereever I intend to use my template... (not as self-sufficient as desirable)

Andrei Over a year ago

you can make module with HeaderComponent and MyProjectionDirective in exports and always import them as pair wherever you need

Collectives™ on Stack Overflow

Angular6 transclusion / content projection: better conditional on wrapping html

→ is there a better way, to get along with just one reference / attrib ?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

→ is there a better way, to get along with just one reference / attrib ?

1 Answer 1

2 Comments

Related