*doing IT right!
9.4/10

Note globale sur 13 avis

Créer un component dans Ionic 5 avec Angular 12

Ce tutoriel Ionic 5 vous permet de créer un component Angular 12 simplement. Mais à quoi sert un component ? Avec une application mobile hybride, Ionic ou autre, nous aurions tendance à penser qu'elle va fonctionner comme un site web. Oui et non.

Un component avec Angular sert à ne pas répéter du code. Par exemple, vous n'allez pas écrire plusieurs fois le code qui créer le header de votre application mobile sur chaque page. Au lieu de cela on peut simplement appeler un component. Nous pourrions comparer cela à la création d'un module.
Prérequis

  • Connaissances techniques de base avec Ionic 5 et Angular
  • NodeJS version 14, minimum
  • CLI Ionic à la version 5

Initialisation du projet Ionic

Le CLI de Ionic doit être installé globalement avec "npm install -g @ionic/cli", puis nous créons notre application mobile avec "ionic start". Choisir Angular, le nom de notre application mobile : "ionic-angular-component", le template "blank". On patiente quelques instants et on crée ou non son compte Ionic. Accéder au projet avec votre éditeur de code favoris ! Pour vérifier que le projet à bien été généré, utiliser la commande "ionic serve", ce qui devrait ouvrir une fenêtre du navigateur avec notre application de base. Si tout semble fonctionner alors on peut commencer le développement. 

Création des pages

Avec notre nouveau projet Ionic 5 nous avons une simple page "home", dans ce cas nous pourrions simplement créer votre header d'application sur cette page et s'en contenter.

Mais partons du principe ou l'application à un vingtaines de pages, réécrire le code du header prendra du temps, sera une source de bugs et lourd à maintenir.

Commençons par créer notre header sur la page d'accueil en modifiant le fichier HTML :

-->Code

// ionic-angular-component/src/app/home/home.page.html

<ion-header>

  <ion-toolbar>

    <ion-buttons slot="secondary">

      <ion-button>

        <ion-icon slot="icon-only" name="person-circle"></ion-icon>

      </ion-button>

      <ion-button>

        <ion-icon slot="icon-only" name="search"></ion-icon>

      </ion-button>

    </ion-buttons>

    <ion-buttons slot="primary">

      <ion-button>

        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>

      </ion-button>

    </ion-buttons>

    <ion-title>Mon application</ion-title>

  </ion-toolbar>

</ion-header>

 

<ion-content>

  <div id="container">

    <strong>Première page</strong>

    <p>

      de mon application

    </p>

  </div>

</ion-content>

<--

Ici, un header très simple, utilisant les components de base Ionic : https://ionicframework.com/docs/api/toolbar

Créons une deuxième page pour notre application avec le générateur Ionic en utilisant "ionic g page", choisir "home-second" comme titre.

Copier le code HTML et SCSS de notre première page "home" dans "home-second" (changer le texte "Première page" en "Deuxième page" sur la nouvelle page "second-home"). Puis toujours sur notre première page, ajouter un lien vers notre seconde page "home" :

-->Code

// ionic-angular-component/src/app/home/home.page.html

...

<p>

  de mon application

</p>

 

<ion-button color="dark" fill="outline" size="small" [routerLink]="['/home-second']">Ouvrir deuxième page home</ion-button>

...

<--

Pour le retour en arrière ajouter sur notre seconde page "home" :

-->Code

// ionic-angular-component/src/app/home-second/home-second.page.html

...

<p>

  de mon application

</p>

 

<ion-button color="dark" fill="outline" size="small" [routerLink]="['/home']" routerDirection="root">Retour à la première page home</ion-button>

...

<--

Testons l'application, nous avons maintenant deux pages, avec le même header.

 

Pour l'instant il n'y a que deux pages, mais imaginons une application mobile avec 20 pages, est-on obligé de recopier le même code pour le header sur chacune d'entre elles ?

Création du component Angular dans Ionic

Créons notre component Angular avec le générateur Ionic avec "ionic g component", choisir "components/header" comme titre. Notre composant est placé dans le dossier "components/" de notre projet.

Modifier le code HTML du component en copiant ce qui est présent dans "second-home.page.html" et le coller dans notre component :

-->Code

// ionic-angular-component/src/app/components/header/header.component.html

<ion-header>

  <ion-toolbar>

    <ion-buttons slot="secondary">

      <ion-button>

        <ion-icon slot="icon-only" name="person-circle"></ion-icon>

      </ion-button>

      <ion-button>

        <ion-icon slot="icon-only" name="search"></ion-icon>

      </ion-button>

    </ion-buttons>

    <ion-buttons slot="primary">

      <ion-button>

        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>

      </ion-button>

    </ion-buttons>

    <ion-title>Mon application</ion-title>

  </ion-toolbar>

</ion-header>

<--

Supprimer de "home.page.html" et "home-second.page.html" tout le bloc "<ion-header>". Désormais plus de header sur nos deux pages, mais nous allons importer dans celles-ci notre nouveau component !

Ce qui donne sur nos deux pages "home" :

-->Code

<app-header></app-header>

 

<ion-content>

...

<--

Essayons de voir le résultat. Oups, une erreur est survenue, Angular n'arrive pas à trouver ce component. Nous allons l'importer.

Pour cela créons un "shared module", un module qui va nous permettre à Angular de reconnaître notre "header component" et de pouvoir l'utiliser où bon nous semble.

Utiliser la commande "ionic g module modules/shared" pour le créer. Puis dans ce nouveau fichier remplacer le code par :

-->Code

// ionic-angular-component/src/app/modules/shared/shared.module.ts

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

import { CommonModule } from '@angular/common';

import { HeaderComponent } from './../../components/header/header.component';

 

@NgModule({

  declarations: [

    HeaderComponent

  ],

  imports: [

    CommonModule,

  ],

  exports: [

    HeaderComponent

  ],

})

 

export class SharedComponentModule { }

<--

Puis dans notre fichier module de nos deux pages "home", ajouter :

-->Code

// ionic-angular-component/src/app/home-x/home-x.module.ts

...

import { IonicModule } from '@ionic/angular';

import { FormsModule } from '@angular/forms';

// Import de notre shared module

import { SharedComponentModule } from './../modules/shared/shared.module';

...

@NgModule({

  // Ajout du shared module dans les imports de la page home et home-second

  imports: [

    ...

    SharedComponentModule

  ],

  ...

})

...

<--

Relancer le projet avec "ionic serve", et sur nos deux pages nous avons notre header component affiché correctement.

Votre component Ionic est maintenant créé et utilisable à l'infini sur toutes les pages de votre application mobile. Nous pourrions créer aussi un "footer component" pour l'afficher sur toutes les pages, il suffit de suivre la même méthode et ajouter dans le "share.module.ts" le nouveau component !

Ainsi nous évitons la duplication de code HTML et de code CSS. Votre application mobile sera plus légère, le développement plus simple !

Contact

367 rue de saint-denis
45590 Saint Cyr en Val

ouvert de 9h à 17h