Angular ngIf

ngIf is a structural directive in Angular that allows you to conditionally render elements or templates based on an expression. It is commonly used to control the visibility or existence of HTML elements in the DOM.

Syntax:

The basic syntax of ngIf directive is as follows:

<element *ngIf="expression">
  <!-- Content to show when expression is true -->
</element>

The expression is evaluated and if it returns a truthy value, the element and its content will be displayed. If the expression evaluates to a falsy value, the element will not be rendered in the DOM.

Examples:

Example 1: Simple usage

<p *ngIf="showMessage">Hello, World!</p>

In this example, the paragraph element will be rendered if the expression showMessage evaluates to true. If it is false, the paragraph will not be displayed.

Example 2: Rendering templates

<div *ngIf="condition; then thenBlock; else elseBlock"></div>

<ng-template #thenBlock>
  <p>This is rendered when condition is true.</p>
</ng-template>

<ng-template #elseBlock>
  <p>This is rendered when condition is false.</p>
</ng-template>

In this example, we are using the ngIf directive with a template syntax. The condition is evaluated, and based on its result, either the thenBlock or the elseBlock template will be rendered. This allows us to conditionally render complex templates based on the evaluation of an expression.

Additional Features:

Using ngIf with Else

You can use the else keyword with ngIf to conditionally render content when the expression is false. This provides a convenient way to display alternative content when the condition is not met.

<div *ngIf="showMessage; else elseBlock">Hello, World!</div>

<ng-template #elseBlock>
  <div>Sorry, the message cannot be displayed.</div>
</ng-template>

In the above example, if showMessage evaluates to true, the "Hello, World!" message will be displayed. Otherwise, the content inside the elseBlock template will be rendered.

Destructuring ngIf Else to a Variable

You can assign the ngIf condition to a template variable using the as keyword. This allows you to access the truthiness of the condition using the template variable.

<div *ngIf="showMessage as displayMessage">
  <p>{{ displayMessage ? 'Message is displayed' : 'Message is hidden' }}</p>
</div>

In this example, the showMessage condition is assigned to a template variable displayMessage. We can then access the truthiness of displayMessage inside the template using interpolation.

Conclusion:

Angular's ngIf directive is a powerful tool for conditionally rendering content in your application. It provides flexibility and control over the visibility of elements based on expression evaluation. Use it in combination with other directives and templates to create dynamic and interactive user interfaces.

Note: This response is written in markdown format.