Understanding Built In Angular Directives - Part 4
Tags: angular, beginners, directives, tutorial
Published: 2021-12-23 21:40:00

**T**oday we will continue our journey in understanding the other built in Angular directives mainly the **Structural Directives**.
The directives which are used to change the structure of the DOM are called <u>structural directives</u>. 
On a high level a structural directive adds or removes element in the DOM.

The first directive which we will understand is the `ngIf` directive.

The structural directives always starts with an asterisk `*` 

`*ngIf`
ngIf directive is used to show or hide an element on which it is added conditionally. If the condition executes to true the element will be shown else the element will be hidden.
**A point to note**
_The element is completely removed from the DOM if the condition executes to false. It will not occupy any space in the DOM._

Now lets see in practice-
Lets create a fresh component. Name it `structural-directive-demo`.
If you are not aware of what is a component or how to create and use it I would highly recommend to read through the [post](https://dev.to/anubhab5/creating-angular-component-129e).
Once the component is created our project would look like -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d21yt1dn3t2t8jmcv86f.PNG)
Lets open the component.ts file and write the below code-

To be precise add the variable `myAge` and assign the value `18` to it.
```
export class StructuralDirectiveDemoComponent implements OnInit {

  myAge = 18;

  constructor() { }
  ngOnInit(): void { }
}
```

Now open the corresponding html template file and paste in the below code-

```
<p *ngIf="myAge >= 18">I am an Adult!</p>
<p *ngIf="myAge < 18">I am a CHILD</p>
```
Now lets start the application and open the browser and open localhost:4200.
You should see an output like below -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtoi9ols5j94utxxih2m.PNG)
Lets understand what is happening under the hood.

The variable `myAge` is holding the value 18 (the model).
In the template when we write the below code say-
`<p *ngIf="myAge >= 18">I am an Adult!</p>`
the variable myAge points to the model or we can say it holds the value present in the model. The condition `myAge >= 18` returns `true` which is assigned to the directive ngIf. Since true is assigned to the directive `ngIf` the `p` tag is visible.
Now lets change the `myAge` variable value to say 17 so that the above condition is false but the second line of code 
`<p *ngIf="myAge < 18">I am a CHILD</p>` returns true.

Now if you open the browser you will see that the output changes.
The first `p` tag is not shown/ hidden while the second `p` tag is shown which was hidden when the model value was 18.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt4q94dsxny477fp83gt.PNG)
So that's the power of ngIf directive. If you have to conditionally show/ hide some data in the template you can easily use it.
Also to add to the above stuff you can also assign a function to the ngIf directive which returns a Boolean value. Something like below -
In component.ts file you have a function like below - 

```
  checkAge() {
    if (this.myAge >= 18) {
      return true;
    } else {
      return false;
    }
  }
```
and in html template file you can call the function inside ngIf like below -

```
<p *ngIf="checkAge()">I am an Adult!</p>
```
**Note**
_Any values like `false`, `null`, `undefined`, `empty string` when assigned to `ngIf` will result in hiding the element._

Hope you enjoyed the post.
Do like comment and share the post.

**Cheers**!!!
_Happy Coding_