Créer des composants autonomes
Déclarez des composants avec l’indicateur standalone.
Créer des composants autonomes est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Créer un composant autonome
Un composant autonome est simplement une classe décorée avec @Component et indiquée comme autonome. Dans Angular v19 et les versions ultérieures, c’est la valeur par défaut : vous n’avez donc souvent même pas besoin d’écrire l’indicateur.
L’indicateur standalone
Auparavant, vous définissiez standalone: true dans le décorateur. Dans la version 19 et les versions ultérieures, les composants sont autonomes par défaut, l’indicateur est donc facultatif.
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
standalone: true, // optional in v19+
template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}Sélecteur
Le selector est la balise d’élément personnalisée utilisée pour placer le composant dans un modèle, comme app-greeting.
// usage in another template:
// <app-greeting></app-greeting>Modèle intégré
Utilisez la propriété template pour du code HTML intégré, idéal pour les petits composants.
@Component({
selector: 'app-badge',
template: '<span class="badge">New</span>'
})
export class BadgeComponent {}Modèle externe
Pour les vues plus importantes, utilisez templateUrl pour pointer vers un fichier HTML.
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html'
})
export class ProfileComponent {}Styles
Ajoutez des styles propres au composant avec styles (intégrés) ou styleUrl / styleUrls (fichiers externes).
@Component({
selector: 'app-card',
template: '<div class="card"></div>',
styles: ['.card { padding: 16px; }']
})
export class CardComponent {}Logique de la classe du composant
Le corps de la classe contient l’état et le comportement. Avec les signaux, déclarez l’état réactif sous forme de champs.
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
n = signal(0);
}Aucun module nécessaire
Remarquez qu’il n’y a ni @NgModule ni tableau de déclarations. Le composant est prêt à être importé partout où il est nécessaire.
Convention de nommage des fichiers
La convention Angular nomme les fichiers comme greeting.component.ts, la classe GreetingComponent et le sélecteur app-greeting.
Utiliser un composant dans un autre
Pour utiliser un composant autonome enfant, importez-le dans le tableau d’imports du composant parent (voir la prochaine leçon), puis placez son sélecteur dans le modèle parent.
Générer avec le CLI
Le CLI Angular génère par défaut des composants autonomes. L’exécution de ng generate component greeting crée pour vous la structure d’un GreetingComponent autonome.
Vérification rapide : création de composants
À propos des valeurs autonomes par défaut.
Récapitulatif : créer un composant autonome
Vous créez un composant autonome avec @Component, en définissant éventuellement standalone: true (la valeur par défaut dans la version 19 et les suivantes). Vous définissez un sélecteur, un modèle ou templateUrl, des styles facultatifs et la logique de la classe. Aucun NgModule n’est nécessaire. Ensuite : importer directement les dépendances.
Questions Fréquemment Posées
La leçon « Créer des composants autonomes » est-elle gratuite ?
Oui — le texte complet de « Créer des composants autonomes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Créer des composants autonomes » ?
Déclarez des composants avec l’indicateur standalone. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Créer des composants autonomes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pourquoi utiliser des composants autonomes
- Créer des composants autonomes
- Importer directement les dépendances
- Amorcer une application autonome