24-2 Composant ErreurComponent

Il est possible de créer un composant pour l'affichage d'un message d'erreur. Composant qu'on pourra réutiliser dans les autres composants nécessitant d'afficher une erreur.

Créer le composant Erreur via Angular CLI
```
ng g component shared/components/erreur
```

Y mettre simplement le div avec la classe alert de Bootstrap et faites en sorte que la composante prenne en entrée un message, soit le message d'erreur.

src/app/shared/components/erreur.ts
@Component({
  selector: 'app-erreur',
  imports: [],
  template: `
    @if(message) {
      <div class="alert alert-danger">{{message}}</div>
    }
  `,
  styles: ``
})
export class Erreur {
  @Input() message?: string;
}

Modifier le composant de page afin qu'il appelle le composant d'erreur et y passe le message en paramètre.
src/app/pages/projets/projets-index.page.ts
```


<app-erreur [message]="msgErreur"></app-erreur>


```

Vous aurez le même résultat, mais sans avoir à répéter le code HTML de div alert sur chaque composant ou vous voulez afficher l'erreur. Ainsi, si vous avez une modification à apporter au visuel du message d'erreur, vous pourrez le modifier à un seul endroit.