The structural directive *ngIf is used in combination with <ng-template> to conditionally display content based on the expression. When the expression evaluates to true, the element and its children are included in the DOM; otherwise, they are excluded. *ngIf conditionally adds or removes elements from the DOM.

<ng-template> is an Angular element used for defining template content that you can reuse or conditionally include in the application. The content inside <ng-template> is not directly rendered in the DOM.

Mastering Angular: Conditional Rendering with ng-template

Toggling visibility using ngIf directive

Show/hide example

*.component.html

<div *ngIf="show">Lorem ipsum dolor sit amet consectetur ...</div>

*.component.ts

show = true;

In this example, the *ngIf directive is used to conditionally display the <div> element based on the value of the show property. If show is true, the <div> and its contents will be rendered; if show is false, the <div> will not be present in the DOM.

You can add a button to toggle the show property (the show/hide effect).

Update *.component.html

<div *ngIf="show">Lorem ipsum dolor sit amet consectetur ...</div>
<button (click)="show = !show">Change state</button>

When you click the “Change state” button, the show property is toggled between true and false. As a result, the <div> element will be added to or removed from the DOM accordingly.

Usage of ng-template

The *ngIf directive allows you to conditionally include or exclude elements from the DOM based on the evaluation of an expression. When combined with an else clause, it provides a way to handle both true and false conditions.

Example #1

*.component.html

<div *ngIf="isLogged; else elseBlock">
  <!-- True  section -->
  <p>Welcome back!</p>
</div>

<ng-template #elseBlock>
  <!-- False  section -->
  <p>Please log in.</p>
</ng-template>

*.component.ts

isLogged = true;

The *ngIf directive checks the value of the isLogged variable. If isLogged is true, the content Welcome back! will be rendered. If isLogged is false, the <ng-template> with the reference #elseBlock will be used to display alternative content.

You can add a button to toggle the isLogged property.

Updated *.component.html

<div *ngIf="isLogged; else elseBlock">
  <!-- True  section -->
  <p>Welcome back!</p>
</div>

<ng-template #elseBlock>
  <!-- False  section -->
  <p>Please log in.</p>
</ng-template>

<button (click)="isLogged = !isLogged">Change state</button>

Example #2

The following code snippet demonstrates the usage of the *ngIf directive with the then and else clauses using <ng-template> element.

*.component.html

<div *ngIf="isLogged; then trueBlock; else elseBlock"></div>
<ng-template #trueBlock>
  <!-- True  section -->
  <p>Welcome back!</p>
</ng-template>

<ng-template #elseBlock>
  <!-- False  section -->
  <p>Please log in.</p>
</ng-template>

*.component.ts

isLogged = true;

If isLogged evaluates to true, Angular will render the content defined in the trueBlock template. Otherwise, it will render the content defined in the elseBlock template. The <ng-template> block with the reference #elseBlock defines the content to be rendered when isLogged is false. It displays a “Please log in.” message.

Example #3

The following code snippet demonstrates another way to use Angular’s *ngIf directive with the then and else clauses, this time directly on the <ng-template> element itself.

*.component.html

<ng-template *ngIf="isLogged; then trueBlock; else elseBlock"></ng-template>
<ng-template #trueBlock>
  <!-- True  section -->
  <p>Welcome back!</p>
</ng-template>

<ng-template #elseBlock>
  <!-- False  section -->
  <p>Please log in.</p>
</ng-template>

*.component.ts

isLogged = true;

Conclusion

Both examples (Example #2 and Example #3) achieve the same result of conditional rendering and directly render the content defined in the templates, while Example #1 wraps the content within a <div> element when isLogged is true.

Example #1 HTML output

<div _ngcontent-ng-c1051038721="">
    <p _ngcontent-ng-c1051038721="">Welcome back!</p>
</div>

Example #2 and Example #3 HTML output

<p _ngcontent-ng-c1051038721="">Welcome back!</p>