🟠 Directive Enhancement

Information

Directive is a very powerful tool only offered by the Angular framework. You can apply the DRY principal 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 exercice, 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