DEV Community 👩‍💻👨‍💻

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on

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

Top comments (0)

Take Your Github Repository To The Next Level

Take Your Github Repository To The Next Level 🚀️: A step-by-step guide on creating the perfect Github repository.