Découvrir le composant standalone 🔥

Depuis Angular 15, Un composant standalone est une manière plus simple de construire des applications avec Angular. Il permet de créer des éléments réutilisables et indépendants, sans avoir besoin de configurer des modules complexes.

import { Component } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [NgClass],
  template: `
     <p [ngClass]="{ 'active': isActive }">Actif</p>
  `,
  styles: `
    .active {
      color: green;
    }
  `
})
export class AppComponent {
  isActive = true;
}

Lorsqu'un composant est marqué comme standalone à l'aide de la propriété standalone: true dans sa configuration, cela signifie qu'il est conçu pour être utilisé de manière indépendante, sans avoir besoin d'un module spécifique pour fonctionner correctement. Ils sont une alternative aux composants qui nécessitent un module Angular spécifique et sont destinés à simplifier le processus de développement en réduisant la dépendance aux NgModules.

Les imports

Pensez à importer les modules nécessaires pour votre composant standalone. Dans l'exemple ci-dessus, nous avons importé NgClass depuis @angular/common pour utiliser la directive ngClass dans le template.

Démarrer sur un composant standalone

SVotre composant racine est souvent appelé AppComponent. Vous pouvez démarrer votre application directement à partir d'un composant sans avoir besoin d'un module spécifique. Voici comment vous pouvez démarrer une application Angular à partir d'un composant standalone :

1. Tout d'abord, assurez-vous d'avoir un fichier main.ts dans votre projet Angular.

2. Dans ce fichier main.ts, importez bootstrapApplication depuis @angular/platform-browser :

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

bootstrapApplication est une fonction qui prend un composant en argument et démarre l'application Angular à partir de ce composant.