Débuter avec Angular 14: #7 Les composants: comment les pimper

C'est cool de créer des composants mais s'ils affichent tout le temps la meme chose, on est d'accords qu'ils seront ennuyeux à mourir

Les props a.k.a @Input()

C'est un terme qui n'est pas lié à Angular mais qu'on entend plus souvent chez des frameworks comme React, Vue, Svelte (enfin presque tous les frameworks appellent ca comme ca)

En Angular, on les app.

Les props permettent tout commes les parametres d'une fonction, d'injecter des variables qui pouront ensuite etre utilisés pour calculer par exemple (dans le cadre d'une fonction) et plus encore (afficher, dans le cadre d'une composant)

Pour permettre au composant DishCard d'afficher un nom de plat par exemple

// dish-card.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dish-card',
  templateUrl: './dish-card.component.html',
  styleUrls: ['./dish-card.component.css'],
})
export class DishCardComponent implements OnInit {
  @Input() name: string = '';

  constructor() {}

  ngOnInit(): void {}
}

<!-- app.component.html -->
<app-dish-card name="hey"></app-dish-card>