Directives and Pipes in Angular/

...

/

Solution: Show and Hide with Alternative Templates

Solution: Show and Hide with Alternative Templates

Here’s the solution to the task implementing a custom NgIf directive with the expected result and explanation.

We'll cover the following...

Solution

The following is an implemented solution to the given task. We can confirm our result below:

11:
<div *appGreater="11; else small"> I'm greater than 10</div>
<hr>
9:
<div *appGreater="9; else small"> I'm 9, so I will not be rendered!</div>

<ng-template #small>
  <div>I'm smaller than 10</div>
</ng-template>
The task’s solution
...