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.
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>
Get hands-on with 1200+ tech skills courses.