Is it possible to do conditional content projection (transclusion) in angular 2+
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 ?
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
上一篇: 100％高度的容器