Angular
Angular Components

📌 Créer un bouton réutilisable

La meilleure méthode en Angular pour créer un bouton réutilisable est d'utiliser un composant Angular avec @Input().

Démonstration

Le Catalogue de Boutons
Un seul composant génère tous ces styles grâce aux @Inputs
color="primary"
color="success"
color="secondary"
[disabled]="true"
import { ButtonSharedComponent } from './buttonShared.component';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-button-parent',
  imports: [ButtonSharedComponent],
  template: `
    <div class="border p-2">
      <h2>Composant utilisant le bouton réutilisable</h2>
      <div class="border p-2">
        <h3>Boutons réutilisables</h3>
        <div class="d-flex">
          <app-button-shared label="Envoyer" type="submit" color="primary"></app-button-shared>
          <app-button-shared label="Annuler" color="secondary"></app-button-shared>
          <app-button-shared label="Supprimer" color="danger" [disabled]="true"></app-button-shared>
        </div>
      </div>
    </div>
  `
})
export class ParentButtonComponent implements OnInit {
  constructor() {}
  ngOnInit(): void {}
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button [type]="type" [ngClass]="color" [disabled]="disabled">
      {{ label }}
    </button>
  `,
  styles: [`
    .primary { background-color: blue; color: white; }
    .secondary { background-color: gray; color: white; }
    .danger { background-color: red; color: white; }
  `]
})
export class ButtonComponent {
  @Input() label: string = 'Bouton';
  @Input() type: 'button' | 'submit' | 'reset' = 'button';
  @Input() color: 'primary' | 'secondary' | 'danger' = 'primary';
  @Input() disabled: boolean = false;
}

1. Créer le composant bouton dans le terminal :

ng generate component shared/button

2. Modifier le composant (button.component.ts) :

Ajoute des entrées personnalisables (@Input) comme le label, la couleur et l'état désactivé.

3. Utiliser le bouton dans un autre composant :

<app-button label="Envoyer" type="submit" color="primary"></app-button>
<app-button label="Annuler" color="secondary"></app-button>
<app-button label="Supprimer" color="danger" [disabled]="true"></app-button>

Cette méthode est simple, efficace et réutilisable dans tout le projet. 😊