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.

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' },
  ];
}

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 ​

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 { }

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.

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 :

import { bootstrapApplication } from '@angular/platform-browser';

import { bootstrapApplication } from '@angular/platform-browser';

3. Importez le composant UsersComponent depuis son emplacement dans votre projet :

import { UsersComponent } from './users.component';

import { UsersComponent } from './users.component';

4. Utilisez l'API bootstrapApplication pour démarrer l'application en spécifiant le composant UsersComponent comme composant racine :

bootstrapApplication(UsersComponent);

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.