Angular 2 Hiding with conditionals

Question

I am using *ngIf to conditionally show a block of code which works as I need it.

However I need to use [hidden] or display:none to actually hide the block in the dom. As I understand I can only provide true or false with [hidden].

How can I conditionally hide this from the Dom using [hidden] or [class] ?

<div *ngIf="raid != -1;">
    <p>Need to display:none inside of this</p>
</div>

you can set any condition inside *ngIf="condition" that return a boolean value. — Mostafa Saadatnia, Feb 18 '20 at 11:39

score 0 · Answer 1 · answered Aug 24 '17 at 00:39

0

You have to add your hidden option within the tag:

<p [hidden]="true">Need to display:none inside of this</p>

And replace the true within the "" with your variable name

Or as such if you want to hide just a part of the text:

<p>some text <span [hidden]="true">this will be hidden (or not) </span>some more text</p>

answered Aug 24 '17 at 00:39

Romanow

124
2
6

you can use something like [style.display]="!isLoading ? 'block' : 'none'" – leox Oct 02 '19 at 03:58

Angular 2 Hiding with conditionals

1 Answers1