Angular ngIf Structural Directive.

In angular for hiding and showing a HTML elements we can use a ngIf structural directive.

Scenario

Let us consider one button and a label with paragraph in HTML.

Case 1: By default we should show the paragraph label and a button with “Hide” Label.

Case 2 : When User clicks on the “Hide” Button, we need to hide the paragraph and “Show” button should appear by hiding the “Hide” Button.

Case 3: Now again when the User clicks on “Show” Button, we need to show the “paragraph label ” and “Hide” Button should appear by removing the “Show” Button.

Solution

To handle the above Scenario we can use ngIf structural directive.

To solve the above scenario let us create a new component in our angular project. (Assuming that you have already created angular project in your local system.)

Default app Component

Assuming you guys already have a default angular project in your local. I’m using a default app component to explain the scenario.

app.component.ts
app.component.html
app.component.css

Now, let us implement our HTML and Typescript logic below.

Component Typescript

import { Component } from "@angular/core";
@Component({
 selector: "my-app",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.css"]
})
export class AppComponent {
 showStatus = false;
 label = 'Paragraph Label';
}

From the above code snippet we have two variable created,

showStatus: The variable which decides wether to show the paragraph or not, by default the value of showStatus is false (As per Case 1 from above)

label: The label which need to show or hide based on the showStatus value.

Component HTML

<button (click)="showStatus = !showStatus">
   {{showStatus ? 'Hide' : 'Show'}}
</button>
<p *ngIf="showStatus">{{label}}</p>

Now, From the above code snippet, i have created a button and paragraph with the values coming from typescript.

Activities

There is a button which have a click handler, the handler will updates the showStatus value either from true-false or false-true.

1. As we are using the ternary operator along with interpolation for rendering button label. The button label will always depends on the showStatus value. When the showStatus value is true the button label appears as “Hide”, when showStatus value is false the button label appears as “Show”.

2. There is a paragraph tag, where *ngIf structural directive has been used, which is assigned to showStatus variable . *ngIf always expects a boolean value i.e.. either true or false.

3. When the showStatus value is true the element appears and when the showStatus value is false the element disappears.

Conclusion

1. When we want to handle the HTML content based on the conditions we use *ngIf.
2. *ngIf expects a boolean value either true or false.
3. When the value is true the element will appears in the DOM, but when the value is false the element will be removed completely from the DOM.
4. This always adds and removed the element from the DOM tree.
5. We can use *ngIf in other way using property binding i.e.. [ngIf] — This format can be used only for <ng-template> tag of angular.
6. Sometimes this may effect the HTML rendering and may disturb the UI as the element will be removed and added, and may also creates fluctuations in the Web page. To avoid this we can use HTML hidden property.