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

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

}

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>

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

}

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