Skip to content

Composant Standalone

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.

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

@Component({
  standalone: true,
  selector: 'app-users',
  imports: [CommonModule],
  template: `
    <h2>List of Users</h2>
    <ul>
      <li *ngFor="let user of userList">{{ user.name }}</li>
    </ul>
  `,
})
export class UsersComponent {
  userList = [
    { name: 'John' },
    { name: 'Jane' },
    { name: 'Alice' },
    { name: 'Bob' },
  ];
}

Lorsque vous définissez imports dans un composant ou un module, vous spécifiez les dépendances nécessaires pour que ce composant ou module fonctionne correctement. Les dépendances peuvent être d'autres modules, des composants, des directives, des pipes ou d'autres fonctionnalités provenant de bibliothèques externes.

Les imports servent à fournir un accès aux fonctionnalités dont vous avez besoin pour utiliser dans le template, la logique ou d'autres parties d'un composant ou d'un module.

Maintenant, en ce qui concerne le concept de standalone, il s'agit d'une fonctionnalité spécifique à Angular qui permet de créer des composants qui peuvent fonctionner de manière autonome, sans dépendre d'un module Angular spécifique.

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.

Ajouter dans le composant standalone dans un module

ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UsersComponent } from './users.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UsersComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Le UsersComponent est ajouté au tableau imports de l'NgModule AppModule. Cela permet d'inclure le UsersComponent dans le contexte existant basé sur NgModules de l'application.

WARNING

Il est important de noter que lors de l'importation d'un composant standalone dans un NgModule existant, vous ne pouvez pas le déclarer à nouveau dans le tableau declarations. La déclaration initiale du composant en tant que standalone suffit.

Démarrer sur un composant standalone

Supposons que vous ayez un composant standalone appelé UsersComponent que vous souhaitez utiliser comme composant racine de votre application. Voici comment vous pouvez le démarrer en utilisant bootstrapApplication :

  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 :

typescript
import { bootstrapApplication } from '@angular/platform-browser';
  1. Importez le composant UsersComponent depuis son emplacement dans votre projet :
typescript
import { UsersComponent } from './users.component';
  1. Utilisez l'API bootstrapApplication pour démarrer l'application en spécifiant le composant UsersComponent comme composant racine :
typescript
bootstrapApplication(UsersComponent);

Avec ces étapes, l'application sera démarrée en utilisant le UsersComponent comme composant racine, sans avoir besoin d'un NgModule spécifique.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !