Débuter avec Angular 14: #7 Les composants: comment les pimper
Sid Ali BENTIFRAOUINE
Posted on October 9, 2022
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>
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
August 28, 2023