Appearance
Création du composant racine ​
Nous allons créer le premier composant indispensable pour notre application. C'est le composant présent dans le module racine. Voici la structure de notre application :
<project root>
app
app.component.ts
app.module.ts
main.ts
index.html
Le fichier app.component.ts
contient le code suivant :
ts
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
template: '<p>Hello World</p>'
})
export class AppComponent {
}
Créer un composant est très simple. C'est le décorateur Component
qui définit :
- Le sélecteur dans le DOM avec
selector
- Le template avec
template
Rappelez-vous, dans index.html
, nous avons :
html
<app-root>Loading...</app-root>
Le contenu sera remplacé par le template et le composant s'éxécutera.
Ajouter le composant dans le module déjà créé. ​
Maintenant qu'on a créé le composant, ajoutons le dans le module racine présent dans le fichier app.module.ts
:
js
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppComponent } from './app.component'
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
Puisque c'est le module racine, on ajoute le composant dans bootstrap
. Enfin, puisque c'est le composant fait partie du module, on l'ajoute dans declarations
.
A retenir ​
- Un composant contient un sélecteur HTML et un template
- Dans le cas du composant racine, le nom du sélecteur est le même que l'élément HTML présent dans
index.html