TP

 

Création d’un nouveau composant nommé time (<app-time></app-time>)

 

On se place dans la racine du projet et on tape

ng generate component time

ou 

ng g c time

 

 

Dans le répertoire src/app du projet, le CLI crée  un répertoire time. Le contenu de ce repertoire est  :

/time

  time.component.ts       # Classe du composant

  time.component.html     # Template du composant

  time.component.css      # Styles CSS du composant

  time.component.spec.ts  # Tests unitaires du composant

 

Q1. modifier le composant pour qu’il ressemble à ceci (modifier le Template et la classe)

import { Component } from '@angular/core';

@Component({

selector: 'timer',

template: `<h1>{{ minutes }}:{{ seconds }} </h1>`

})

export class TimerComponent {

minutes: number;

seconds: number;

constructor(){

this.minutes = 24;

this.seconds = 59;

}

}

 

À ce point on a crée un composant en créant une classe  TimeComponent. Décorée avec @Component.

Maintenant consulter le module de l’application  ./src/app/app.modules.ts   pour voir que angular a  enrigistré  votre composant en utilisant  la proprieté Declaractions du module. Maintenat il est reconu par d’autres  éléments de module. Il devient disponible à leur template /templateURL. Ceci veut dire qu’on peut mettre le module timecomponent à l’interieur de appcomponent.

 

9. ouvrer le fichier  du module  AppComponent (.src/app/app.component.ts)  et  modifier le template à :

 <H1>

premiere page, la valeur qui suit vient du composant: {{title}} et ici  le temps(time)<H1><app-time></app-time></H1>

</H1>

 

Comme vous voyez nous référençant  le composant par son sélecteur (app-time).

 

 

file and update its template to show just that: