Angular ngIf Directive

The Angular ngIf directive is used to conditionally show or hide elements based on a given expression. It is a structural directive, which means that it can change the structure of the DOM based on the evaluation of the expression provided to it.

Syntax

<element *ngIf="expression"></element>

Example

<div *ngIf="showMessage">
  <h1>Welcome to the website!</h1>
  <p>Thank you for visiting! We hope you find what you're looking for.</p>
</div>

Output

The output of the above example will be a div element that displays the message only when the showMessage variable in the component class is evaluated to true. If the variable is false, the div element will not be displayed.

Explanation

The ngIf directive is used to conditionally display elements in an Angular application. The expression provided to it is evaluated and if it returns a truthy value, the element will be displayed. If it returns a falsy value, the element will be removed from the DOM and all event listeners and subscriptions will be unsubscribed.

Use

The ngIf directive is commonly used to display or hide elements based on the current state of a component. This can be useful for displaying error messages, conditional navigation links, or showing or hiding specific content based on user input.

Important Points

• The ngIf directive is a structural directive that can change the structure of the DOM.
• The expression provided to ngIf is evaluated and the element is either displayed or removed depending on the result of the evaluation.
• The ngIf directive subscribes and unsubscribes to event listeners and subscriptions, so it is better to use *ngIf in place of hidden or display: none CSS properties for better performance.
• The ngIf directive can also be used with an else clause by using the ng-template element with the #elseBlock template reference variable.

Summary

The ngIf directive is an important tool in Angular for displaying or hiding elements based on an expression evaluation. It is commonly used to control the visibility of certain elements on the page based on user input or component state. Understanding the syntax and use cases of this directive can help you build more dynamic and responsive Angular applications.