📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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 ​

  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

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !