Fichier avec la classe du composant dans Angular
La partie principale de tout composant est sa fonctionnalité, c'est-à-dire proprement dit son programme. Dans Angular, la fonctionnalité du composant est écrite en langage TypeScript et représente une classe POO.
Dans chaque composant, cette classe est située
dans un fichier avec l'extension .ts. Dans notre
composant principal, ce sera le fichier
app.component.ts.
Familiarisons-nous avec le contenu de ce fichier. Pour commencer, faites attention à la classe de notre composant :
export class AppComponent {
title: string = 'test';
}
Le décorateur @Component est appliqué à cette classe.
Ce décorateur prend comme paramètre
un objet qui configure notre composant :
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
La propriété templateUrl définit le chemin
vers le fichier contenant le markup
de notre composant.
La propriété styleUrls définit un tableau
de chemins vers les fichiers CSS, qui stylisent le markup
de notre composant. Comme vous le voyez, le fichier
de style peut être plus d'un.
La propriété selector définit le sélecteur
de la balise HTML dans laquelle sera affiché
(monté) le code HTML de notre
composant. Dans notre cas, nous voyons le nom
app-root. À ce nom correspond
une balise du même nom. Cette balise est écrite dans le fichier
de mise en page src/index.html. À l'endroit
où cette balise est écrite, sera inséré
le markup de notre composant.
La propriété imports spécifie les modules
qui sont importés dans notre composant.
La propriété standalone aura toujours
la valeur true. Pour l'instant, c'est
plutôt un élément technique d'Angular, donc
ne vous y attardez pas pour le moment.
Ouvrez le fichier app.component.ts et
étudiez-le.
Créez plusieurs fichiers de styles et connectez-les dans le décorateur.
