ngIf Directive in Angular

Structural directives allow us to add or remove HTML elements from the DOM (Document object model). They are responsible for the HTML layout by reshaping the DOM structure. At Oodles, we provide Angular development services, using structural directives to manipulate the DOM.

There are three common structural directives that conditionally render the HTML element:

1. ngIf

2. ngSwitch

3. ngFor

All the structural directives are easy to recognize as they have an asterisk preceding the directive attribute name. These directives work by using <ng-template> tag. This is a tag in HTML used to hold template code.

ngIf Directive-

In the example that follows, we have assigned a ngIf directive to the element h2. We, then, assigned a true value to it. If the value assigned is false then "hello" is not displayed and the h2 is removed from the DOM itself. Angular will wrap the host element with a template tag and will transform the ngIf to be a property binding. It removes or adds a part of the DOM depending on an evaluation of the expression.

example: <h2 *ngIf="true"> Hello </h2>

Else block with if block-

In the following example, we make another h2 tag. If the display name assigned is true then if block should be taken in charge and if assigned is false then the else block (which is made in between another HTML element <ng-template>) using a template reference variable to refer to else block. If the expression we used results to be true, angular provides the template in a if block, and when false, it provides the template provided in an optional else clause.

example- template:

`<h2 *ngIf = "displayName"; else elseBlock">

Hello

</h2>

<ng-template #elseBlock>

<h2>

Name is hidden

</h2>

<ng-template>

In ts : export class AppComponent {

displayName=false;

}

Output-> Name is hidden

Are you planning to boost the speed of your current app? Oodles ERP is the Angular development company you need! Our Angular app developers create mobile apps that seamlessly improve app speed and performance. For more details get in touch with our experts!