Exercise: Show and Hide with Alternative Templates

Let’s practice implementing a custom NgIf directive with an alternative template.

We'll cover the following

In this lesson, we practice the alternative template implementation of the NgIf directive.


The objective is to implement a directive that displays the following:

  • An element is displayed when the provided number is greater than 10 (value > 10).
  • An alternative template is displayed when the number is less than 10 (value < 10).
  • Nothing is displayed when the number is equal to 10 (value === 10).

The number should be provided in the directive as shown below:

<div *appGreater="11; else small"> I'm greater than 10 </div>

<ng-template #small>I'm smaller than 10</ng-template>

Get hands-on with 1200+ tech skills courses.