خرید بک لینک

Vote count: 0

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

asked 2 mins ago

برچسب: نویسنده: استخدام کار تاريخ: جمعه 17 ارديبهشت 1395 ساعت: 20:43

صفحه بندی