Chap 4 : Créer votre premier component ( header…

Maintenant que nous en savons un peu plus sur les briques logiciels mit à disposition par Angular vu au chapitre précédent, nous allons pouvoir ajouter notre premier composant. Pour l’exemple, nous réaliserons un header pour la navigation à travers notre application et un footer. Je vous joint le code Github du projet si vous souhaitez vous en inspirer. N’oublier pas quand vous récupérer le projet, d’y faire un npm install au sein du projet afin d’installer les dépendances inscrite dans le package.json.

 

Création des components

On va se déplacer à la racine du projet et créer un nouveau répertoire que l’on va appeler Core :

• cd src
• cd app
• mkdir Core
• cd Core

On va générer nos deux components avec la Cli :

• ng generate component header
• ng generate component footer

 

Customization du Header

On va s’en servir pour créer un menu afin de permettre la navigation dans notre application.

La première étape et d’y ajouter le contenu de la vue du component Header dans la vue du composant principal de notre application, qui est app.component. Pour cela, on va ajouter le sélecteur du component Header et l’insérer dans app.component.html. Vous pouvez modifier le sélecteur de celui-ci dans l’entête du header.component.ts :

Dans cette en tête, vous avez :

• selector : représente la balise HTML à appeler pour afficher la vue du composant de Header, donc son fichier HTML
• templateUrl : c’est le fichier .HTML de la vue du composant
• styleUrls : c’est le fichier de style .CSS correspondant au composant

 

On ajoute donc dans le fichier app.component.html la balise suivante en haut de fichier :

<app-header></app-header>

En lançant notre application nous avons le changement suivant :

Qui permet de nous indiquer que le contenu du header s’affiche correctement.

 

 

Ne pas oublier de déclarer notre nouveau composant dans son module respectif. Cli s’occupe de lui affecter la déclaration, mais c’est bon de savoir ce qu’il se passe quand on appelle la Cli :

 

Ajout du menu de navigation

On va pouvoir ajouter un menu. Pour cela on va utiliser des material component, une librairie de base qui permet l’ajout d’élément graphique :

npm install @angular/material @angular/cdk @angular/animations

Dans app.module.ts, on va ajouter l’import de cette librairie  :

import { MatTabsModule } from '@angular/material/tabs';

Puis dans la partie imports, on ajoute MatTabsModule. Ajouter aussi le BrowserAnimationsModule, disponible depuis :

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Dans le fichier header.component.ts, on va y créer un tableau à fournir à notre menu pour qu’il puisse avoir des noms d’onglet :

Puis y ajouter notre composant dans le header.component.html :

 

Pour fonctionner enfin, il faut fournir un thème de base à notre application pour Angular/material. Pour cela, aller ajouter la ligne suivante dans le fichier style.css :

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Je vous laisse voir la doc, il existe une multitude de code couleur pré existant. Vous pouvez aussi créer le votre.

 

Customization du Footer

On va réitérer les étapes précédentes, à savoir :

Insertion du sélecteur de Footer dans la vue parente, soit à la fin de app.component.html :

<app-footer></app-footer>

 

Création de la <div> du footer :

 

On lui modifie sa feuille de style pour rester fixé en bas du site :

 

 

Et voila le résultat de l’ajout de notre header et footer sur l’application :

 

Dans le prochain chapitre, on va présenter le système de route permettant de naviguer entre les divers composants et module de l’application.