🟠 Directive Enhancement

Note

This exercise can feel obsolete with the new control flow and the empty block inside the @for block. However structural directives are not going to be deleted any time soon, so you can still learn a lot from this exercise.

Information

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