Is it possible to do conditional content projection (transclusion) in angular 2+

Question

I would like to provide default content that would appear only if content is not transcluded.

For example Here is my component template:

<article>
    <header>
        <ng-content select="[header]"></ng-content>
    </header>
    <section>
        <ng-content></ng-content>
    </section>
</article>

I can use it like this:

<my-component>
    <h1 header>This is my header</h1>
    <p>This is my content</p>
</my-component>

Now what if i wanted to provide a default header. Is it possible; without acrobatics like checking for content in ngAfterContentInit?

Answer 1

You can do this with pure CSS! Imagine you have the following

<ng-content select=".header"></ng-content>
<h1 class="default-header">
     This is my default header
</h1>

then the following CSS would hide the header if the content is supplied:

.header + .default-header {
    display: none;
}

If no header is supplied, then the display:none rule isn't matched.

Note, you'll have to turn off content encapsulation to use this: encapsulation: ViewEncapsulation.None