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 :

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 :

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

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

1. Un composant contient un sélecteur HTML et un template
2. 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