Exercise: Show and Hide with Alternative Templates

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

Objectives

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>