Tutorial : Gestion des components
Partie : 1
Pour commencer avec Angular et apprendre à manipuler les components.
Suivez ces étapes pour modifier le template et les styles d'un composant Angular :
Étape 1 : Créer un composant
Si ce n'est pas encore fait, générez un composant Angular avec la commande suivante dans le
terminal :
bash
ng generate component my-component
Cela crée un composant nommé my-component avec des fichiers pour la classe TypeScript, le
template HTML et les styles CSS.
Étape 2 : Modifier le template
Dans le fichier my-component.component.ts, vous pouvez modifier directement le template
dans la propriété template. Voici un exemple :
typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<h1>Hello Universe</h1>
`,
styles: [`
:host {
color: #a144eb;
}
`]
})
export class MyComponent {}
Étape 3 : Modifier les styles
• La couleur du texte est changée grâce à la règle CSS dans la propriété styles.
• La directive :host s'applique au composant lui-même.
Étape 4 : Tester les modifications
1. Assurez-vous que le composant est inclus dans un fichier HTML (comme
app.component.html) en ajoutant son sélecteur :
html
<app-my-component></app-my-component>
2. Démarrez l'application Angular avec la commande :
bash
ng serve
3. Vous verrez Hello Universe affiché dans le navigateur avec la couleur modifiée.
Astuce : Utiliser des fichiers séparés pour template et styles
Plutôt que d'utiliser des inline styles et un inline template, vous pouvez stocker le HTML et
le CSS dans des fichiers séparés :
• HTML : Modifiez my-component.component.html pour inclure :
html
<h1>Hello Universe</h1>
• CSS : Modifiez my-component.component.css pour inclure :
css
:host {
color: #a144eb;
}
Cela rend le code plus lisible et organisé.
Partie : 2
Anatomie d'un Composant dans Angular
Un composant dans Angular est l'élément de base de l'interface utilisateur. Chaque
composant combine de manière cohérente du TypeScript, du HTML et du CSS pour
représenter une partie spécifique de l'application. Voici les éléments principaux d'un
composant Angular :
1. Classe TypeScript
La classe TypeScript contient la logique et les données du composant. Elle définit des
propriétés et des méthodes utilisées dans le template.
Exemple :
typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-mon-composant', // Balise HTML personnalisée pour ce
composant
templateUrl: './mon-composant.component.html', // Lien vers le fichier
template
styleUrls: ['./mon-composant.component.css'], // Lien vers le fichier
styles
})
export class MonComposant {
message: string = 'Bonjour Angular'; // Propriété affichée dans le
template
changerMessage() {
this.message = 'Bonjour Univers !'; // Méthode pour modifier la
propriété
}
}
2. Template HTML
Le template définit la structure et la présentation du composant. Il utilise la syntaxe des
templates Angular pour afficher les données et gérer les interactions.
Exemple (mon-composant.component.html) :
html
<div>
<h1>{{ message }}</h1> <!-- Interpolation pour afficher le message -->
<button (click)="changerMessage()">Changer le message</button> <!--
Gestion d'événements -->
</div>
3. Styles CSS
Les styles définissent l'apparence du composant. Les styles d'Angular sont encapsulés, ce qui
signifie qu'ils n'affectent que le composant correspondant.
Exemple (mon-composant.component.css) :
css
h1 {
color: #007bff;
font-family: Arial, sans-serif;
}
button {
background-color: #28a745;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
4. Métadonnées
Les métadonnées dans le décorateur @Component indiquent à Angular comment utiliser le
composant. Les propriétés principales sont :
• selector : Définit la balise HTML personnalisée utilisée pour rendre le composant.
• template ou templateUrl : Définit la structure HTML (inline ou fichier externe).
• styles ou styleUrls : Définit les styles CSS (inline ou fichier externe).
5. Affichage du Composant
Pour afficher le composant, ajoutez son sélecteur dans le fichier HTML d'un composant
parent (par exemple, app.component.html) :
html
<app-mon-composant></app-mon-composant>
Exemple de Résultat dans le Navigateur
• Message initial : Bonjour Angular
• Après avoir cliqué sur le bouton : Bonjour Univers !
Partie : 3
Mettre à jour un composant dans Angular
Dans Angular, mettre à jour un composant signifie modifier ses données, template ou styles
pour refléter les changements dans l'interface utilisateur. Voici les étapes pour mettre à jour
un composant Angular.
1. Mettre à jour les données dans la classe TypeScript
Pour actualiser les données d'un composant, modifiez ou ajoutez des propriétés dans la classe
TypeScript.
Exemple :
typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-mon-composant',
templateUrl: './mon-composant.component.html',
styleUrls: ['./mon-composant.component.css']
})
export class MonComposant {
message: string = 'Bonjour Angular !';
// Méthode pour mettre à jour le message
changerMessage() {
this.message = 'Message mis à jour !';
}
}
2. Mettre à jour le template
Le template est la structure HTML du composant. Vous pouvez :
• Afficher de nouvelles propriétés via l'interpolation.
• Ajouter des événements pour interagir avec l'utilisateur.
Exemple (mon-composant.component.html) :
html
<div>
<h1>{{ message }}</h1> <!-- Affiche la propriété 'message' -->
<button (click)="changerMessage()">Mettre à jour</button> <!-- Bouton
pour appeler la méthode -->
</div>
• Interpolation : {{ message }} affiche la valeur actuelle de message.
• Gestion d'événements : (click)="changerMessage()" appelle la méthode
changerMessage() lorsque le bouton est cliqué.
3. Mettre à jour les styles
Les styles définissent l'apparence du composant. Vous pouvez modifier les styles directement
dans :
• La propriété styles dans le décorateur @Component.
• Le fichier CSS associé.
Exemple (mon-composant.component.css) :
css
h1 {
color: #007bff;
font-size: 24px;
}
button {
background-color: #28a745;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
4. Observer les changements dynamiques
Angular détecte automatiquement les changements de données dans le composant grâce au
data binding et met à jour l'interface utilisateur. Si vous modifiez la valeur d'une propriété
dans la classe TypeScript, Angular mettra à jour le contenu affiché.
5. Tester les modifications
1. Incluez le composant dans un fichier parent (app.component.html) :
html
<app-mon-composant></app-mon-composant>
2. Lancez le projet avec la commande :
bash
ng serve
3. Ouvrez le navigateur et vérifiez l'interface :
o Le message s'affiche initialement comme "Bonjour Angular !".
o Cliquez sur le bouton, et le message devient "Message mis à jour !".
