[Vidéo] Utilisez les signaux, c'est le futur d'Angular !

Dans cette vidéo de 3 minute, découvrez pourquoi les signaux sont essentiels pour l'avenir du développement web et apprenez les 3 fonctions: signal / computed / effect

Skip to content

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.

ts
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 :

typescript
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.

En aoĂ»t, Recevez des nouvelles libraries Angular 🌟 qui peuvent vous ĂȘtre utiles pour booster vos projets. Inscrivez-vous maintenant et dĂ©couvrez les derniĂšres tendances et outils Angular directement dans votre boĂźte mail !