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

sidali

Sid Ali BENTIFRAOUINE

Posted on October 9, 2022

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 {}
}
Enter fullscreen mode Exit fullscreen mode
<!-- app.component.html -->
<app-dish-card name="hey"></app-dish-card>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
sidali
Sid Ali BENTIFRAOUINE

Posted on October 9, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related