0

Suppose I have the following component (let's call it "MyModalComponent")

MyModalComponent

<div class="my-modal">
  <div class="my-modal-header">
    <ng-content select="modal-title></ng-content>
  </div>
  <div class="my-modal-body">
    <ng-content></ng-content>
  </div>
</div>

When I use it like this, it works perfectly;

<my-modal>
  <h1 modal-title>I am a modal</h1>
  <div>
    And this is my body!
  </div>
</my-modal>
  • The title is rendered within the <div class="my-modal-header"> div
  • The rest of the content goes into the <div class="my-modal-body"> div

However, if I would wrap my html into a different component, the selector projection doesn't work anymore.

MyModalContentComponent

<h1 modal-title>I am a modal</h1>
<div>
  And this is my body!
</div>

<my-modal>
  <my-modal-content></my-modal-content>
</my-modal>

Now all the html code is rendered into the "fallback" <ng-content></ng-content> slot of the MyModalComponent (so, inside the <div class="my-modal-body"> div).
Selectors don't seem to work anymore in this case.

Is this "by design", or rather, how can I make sure it will continue working just like it would if you would place the html markup directly in the MyModalComponent?

Tim Geerts
  • 311
  • 5
  • 14
  • 1
    this is by design, `` can only be matched by the `ng-content`; since there is no selector for `my-modal-content` tag . I'm not sure if you can get your desired output. – C.OG Nov 27 '19 at 10:51
  • https://stackblitz.com/edit/angular-mqu94r take look at this stackblitz here is working of whay have you been tried – Developer Nov 27 '19 at 12:24
  • @GaurangDhorda that's not exactly the situation as I sketched it, in that stackblitz, you still have the title content directly in the , the question I had was if it would be possible to move all the html (and selectors) into the component rather than having any of it still as a direct descendant of . – Tim Geerts Nov 27 '19 at 13:10
  • @c_ogoo I was afraid it would be by design, I'm going to leave the question up for know, and see if someone clever can come up with a non-hacky solution for it though – Tim Geerts Nov 27 '19 at 13:44
  • I don't think you'll find one. For this to work you will need a feature similar to what was in AngularJS with directive replace: https://docs.angularjs.org/api/ng/service/$compile#-replace- – C.OG Nov 27 '19 at 13:51

0 Answers0