Skip to content
angular challenges logo Angular Challenges

๐ŸŸ  Directive Enhancement

Challenge #3

Created by Thomas Laforge

Information

Directives are a very powerful tool only offered by the Angular framework. You can apply the DRY principle by having shared logic inside a directive and applying it to any component you want.

But the real power is that you can enhance an already-existing directive, which moreover doesnโ€™t belong to you.

Statement

In this exercise, we have a want to display a list of persons. If the list is empty, you must display โ€ the list is empty !! โ€.

Currently, we have:

<ng-container *ngIf="persons.length > 0; else emptyList">
<div *ngFor="let person of persons">
{{ person.name }}
</div>
</ng-container>
<ng-template #emptyList>The list is empty !!</ng-template>

We want to get rid of the ng-container by writing:

<div *ngFor="let person of persons; empty: emptyList">
{{ person.name }}
</div>
<ng-template #emptyList>The list is empty !!</ng-template>

The goal is to improve the ngFor directive.

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • tomalaforge
  • tomer953
  • kabrunko-dev
  • svenson95
  • LMFinney