🟠 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

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.