I have not seen how to do more complex stuff using content projection in Angular2. And the basic example i could imagine is some Modal that could have (or not have) header.
You will have smth like:
Modal template
<div class="my-modal">
<div class="my-modal__header">
<ng-content select="my-modal-header"></ng-content>
</div>
<div class="my-modal__content">
<ng-content select="my-modal-content"></ng-content>
</div>
</div>
Usage:
<my-modal>
<my-modal-header>HEADER</my-modal-header>
<my-modal-content>Content</my-modal-content>
</my-modal>
And the problem is:
1) i would like to hide header wrappers if header was not provided (e.g. hide "my-modal__header")
2) i would like to show some default header if header content is not provide (e.g. show "This is header" if header not provided
or smth similar.
How to detect presence of ng-content with exact target?
I've done some plunkr to play around with example: https://plnkr.co/edit/QfBJjD3g82ksTjU5zVqw?p=preview
