2

I have a component <my-component> that I want to only show if one of its properties is set. So I thought about doing something like this in <my-component>:

<ng-container *ngIf="myProperty">
    <div>...</div>
</ng-container>

The thing is the component is created in the HTML DOM. So, to avoid its creation, my assumption is that I should put the *ngIf on the selector of <my-component> in <parent-component>, which would make something like:

<parent-component>
    <my-component *ngIf="myProperty"></my-component>
</parent-component>

But in this case, the property myProperty would be set in <my-component> and not in <parent-component>.

So, if my assumption is correct, what is the way to implement that?

Gaetitan
  • 284
  • 1
  • 6
  • 16

2 Answers2

1

You already have your solution in your question. What you are doing with

<parent-component>
    <my-component *ngIf="myProperty"></my-component>
</parent-component>

is called content projection. And the content will not be projected, when you do not allow the rendering with *ngIf.

EDIT

As you forgot an important point, I have adapted my example in my StackBlitz. In order to do, what you want, you need to emit the flag from the inner component to the parent component via an EventEmitter. The parent component reacts to it and can therefore change the parameter to either hide or show the inner component.

StackBlitz example

Marek W
  • 699
  • 4
  • 14
  • 1
    I forgot to mention that **myProperty** is set in ``````. In this case **myProperty** would not be set in ``````. I edit my question. – Gaetitan Nov 07 '20 at 19:25
  • 1
    Thank you for your edit. It seems like quite a "complex" way for something like that. So I'm wondering if this is correct to put the ***ngIf** in this place or if it should just lay in the child component? – Gaetitan Nov 07 '20 at 20:15
  • 2
    You could also just put it into the child component. It should not really matter, if the DOM displays an empty component - as long it does not contain any styling to interfere with the page – Marek W Nov 07 '20 at 20:22
  • 1
    There will be no interference, so I'll go with the ***ngIf** in the child component. Thanks you for your help! – Gaetitan Nov 07 '20 at 20:31
1

Solution 1: The simples solution would be to wrap the contents of <my-component> (contents of my-component.component.html) in <ng-container> and adding *ngIf to it.

Solution 2: Create a service and in that service create a behaviour subject, inject the service in both the component, now you can toggle the value of that behaviour subject from <my-component> and listen in <parent-component> to toggle the <my-component>

TheViralGriffin
  • 421
  • 1
  • 8
  • 21
  • That's what I think, too. But the component would still exist in the DOM. Is that a good practice to have a component in the DOM which does not display anything? – Gaetitan Nov 07 '20 at 20:19
  • it depends if there is a chance that the component would be toggled often then it is good way to go since all the data would have already been initialised. – TheViralGriffin Nov 07 '20 at 20:27
  • This makes sense. Thank you for your comment. – Gaetitan Nov 07 '20 at 20:32