Angular
Angular Components

📌 Créer un layout réutilisable

Ceci est un exemple de layout de connexion utilisant la puissance de ng-content et @Input() pour projeter du contenu.

Démonstration

Connexion

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-layout-shared',
  template: `
    <div class="auth-container container-fluid d-flex justify-content-center align-items-center bg-primary-subtle">
      <div class="card shadow-lg p-4 bg-light" style="max-width: 400px; width: 100%;">
        <h2 class="text-center text-primary">{{ title }}</h2>
        <ng-content></ng-content>
        <!-- Contenu dynamique (Login/Register) -->
      </div>
    </div>
  `,
  styles: `
    .auth-container {
      width: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 83vh;
      background-color: #f4f4f4;
    }
  `
})
export class layoutSharedComponent {
  @Input() title: string = 'Authentification';
}
import { layoutSharedComponent } from './layoutShared.component';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login-layout',
  imports: [layoutSharedComponent],
  template: `
    <app-layout-shared title="Connexion">
      <form class="p-4 rounded shadow bg-white">
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" placeholder="Entrez votre email" required />
        </div>

        <div class="mb-3">
          <label for="password" class="form-label">Mot de passe</label>
          <input type="password" class="form-control" id="password" placeholder="Entrez votre mot de passe" required />
        </div>

        <button type="submit" class="btn btn-primary w-100">Se connecter</button>
      </form>
    </app-layout-shared>
  `
})
export class LoginLayoutComponent {}

Pour créer une template réutilisable en Angular (ex : pour Login, Register, etc.), la meilleure approche est d'utiliser un layout component qui servira de base à plusieurs pages.

1. Créer un composant de layout :

ng generate component shared/auth-layout

2. Modifier le fichier layout (ajouter ng-content) :

Ce composant servira de template général. On utilise <ng-content></ng-content> pour projeter le contenu enfant.

3. Utiliser le layout dans un composant Login :

Insérer le formulaire de connexion à l'intérieur des balises de votre layout personnalisé.