Using multiple ng-content with ngIf does not work

Question

I have a situation where I need to display some content passed via ng-content with a selector to one of two areas. I have an ngIf that is used to check where to render the ng-content. The problem is that even if I have an ngIf in my first ng-content, the content will not be rendered in the second ng-content even if the condition for the first one is false. Here's an example of the issue:

<div>
    <ng-content *ngIf="someBoolean" select="figure"></ng-content>
    <div *ngIf="!someBoolean">
        <ng-content select="figure"></ng-content>
    </div>
</div>

This works fine if someBoolean is true. However, nothing will be inside the second div if someBoolean is false. What can I do to fix this? I found these two similar questions, but I tried all solutions and it does not work with Angular 6:

Before you lock my question, I guarantee that I have tried all these solutions and they do not work on Angular 6 if you use selectors in ng-content.

can you check this https://stackoverflow.com/questions/62044104/how-to-load-angular-component-based-selected-on-radio-button/62045763#62045763 — mr. pc_coder, May 27 '20 at 19:58
Hello @ThomasFromUganda are you checked this example? https://ng-run.com/edit/N7cnnC9HCm1cKlE88QFp?open=app%2Fapp.component.html — Ashot Aleqsanyan, May 27 '20 at 20:08
@AshotAleqsanyan I have, but if you actually put a selector for the `ng-content`, you will see that it stops working. — ThomasFromUganda, May 27 '20 at 20:10
look in your case the `select="figure"` that means you need to put your data something like this `
the content
` — Ashot Aleqsanyan, May 27 '20 at 20:14
@AshotAleqsanyan Yes, this is exactly what I am doing. If you take the example you linked me, add a selector for `ng-content` in comp.component.html and then add that selector in app.component.html, it will not working anymore. Try it out. — ThomasFromUganda, May 27 '20 at 20:14
strage it is working on my side, here is the screenshots, sorry I couldn't find a way to fork the project — Ashot Aleqsanyan, May 27 '20 at 20:18
Have you tried something like this? `ur content` and in `comp` get the `NgTemplateOutlet` via `@ContentChild` and then to use `ngIf` along with `ngTemplateOutlet` — Andrei Gătej, May 27 '20 at 20:19
https://drive.google.com/file/d/1Bswj6Sgtxzi6B7I5qe4mMdlgODXWOyvh/view?usp=sharing https://drive.google.com/file/d/1v5PNNwIWfRM6D4LUGO7uVM0VwhiF88w5/view?usp=sharing — Ashot Aleqsanyan, May 27 '20 at 20:20
Apologies everyone, I was using PUG and for some reason the ID of the `ng-template` wasn't working properly. — ThomasFromUganda, May 27 '20 at 20:25

Using multiple ng-content with ngIf does not work

0 Answers0