In this video we are going to learn about ngIf Directives.
ngIf Directives is used to add or remove HTML Elements according to the expression.
The expression must return a Boolean value.
If the expression is false then the element is removed, otherwise element is inserted.
So let see how can we use ngif directives in angular 10.
So switch to project.
Lets open app.component.html and here just add a paragraph.

<p>Your age is higher than 18.</p> 

Now go to the app.component.ts file and here create a propery.

age = 19;

Now lets add the ngIf the paragraph.

<p *ngIf=\"age>18\">Your age is higher than 18.</p> 

Now lets check it.
You can see here the text is showing.
If change the age lets say age = 17.
Now you can see here text is not showing here.
Because this condition false.
If this condition will be true then this paragraph will be rendered otherwise not.

Now lets see the else part of ngif.

<ng-template #elseBlock>
    <p>Your age is lower than 18 </p>
</ng-template> 

Add here the reference variable identifier and now add here *ngIf = \"age>18; else elseBlock\".
Now lets check it.
So switch to the browser and here you can see the else block text.
Because is less than 18.
If I change the age.
Now you can see this.
Now lets see another way to use the ngif.

<div *ngIf=\"age>18; then thenBlock; else elseBlock\"></div> 
<ng-template #thenBlock> 
<p>Your age is higher than 18 </p> 
</ng-template> 
<ng-template #thenBlock> 
<p>Your age is lower than 18 </p> 
</ng-template> 

Alright now lets check it.
So switch to the browser and here you can see this.
If change the age.
Lets say age is 16.
Now save the file and here you can see the this message.
So in this way you can use ngif direcetives in angular 10.