hidden property not reflecting immediately in angular 10

Question

I want to hide a div on condition, so I used hidden property like

<div [hidden]="isControlDisplayed()?false:true"> 

isControlDisplayed() method returns true/false based on some other dropdown(select) control in the form group . so when this method returns false it doesn't reflect immediately , it reflects only after I click somewhere else on window.

I have one observation like angular calls method only on some actions on window , is it something like this. how can I solve this issue. can somebody help me.

Thank you

Answer 1

Use the *ngIf directive.

<div *ngIf="isControlDisplayed();">