Search⌘ K
AI Features
Home
Courses
Directives and Pipes in Angular

Solution: Show and Hide with Alternative Templates

Explore how to use Angular directives to show or hide elements based on conditions with alternative templates. This lesson guides you through implementing appGreater and appGreaterElse properties to control rendering effectively, refining your ability to manage visibility in Angular applications.

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
...