Creare una libreria di componenti personalizzati in Ionic 7

In questa breve guida spiegherò come creare un nuovo componente personalizzato in Ionic 7, creare un modulo per collezionare questo e tutti i nostri componenti personalizzati ed infine impostare il modulo per poter utilizzare i nostri componenti personalizzati in qualunque una pagina dell’applicazione.

Lo spunto nasce dall’articolo Create a Show / Hide Password Component in Ionic & Angular al quale ho aggiunto degli ulteriori elementi di dettaglio e modificato leggermente il codice, per consentire all’esempio di “girare” con l’ultima versione disponibile ad oggi del framework.

Partiamo, come al solito, nel lanciare una finestra di prompt dei comandi (in Windows, tasti Windows+R, digitiamo “cmd” e diamo invio), posizioniamoci dunque nella directory principale della nostra applicazione:

D:\Development\appiteasy>

A questo punto, scriviamo il comando per creare un nuovo componente. Nel nostro caso sarà un semplice controllo per Visualizzare/Nascondere la password in un campo di tipo Ion-Input:

D:\Development\appiteasy>ionic generate component components\show-hide-password
> ng.cmd generate component components\show-hide-password --create-module --project=app
CREATE src/app/components/show-hide-password/show-hide-password.component.html (23 bytes)
CREATE src/app/components/show-hide-password/show-hide-password.component.spec.ts (682 bytes)
CREATE src/app/components/show-hide-password/show-hide-password.component.ts (261 bytes)
CREATE src/app/components/show-hide-password/show-hide-password.component.scss (0 bytes)
[OK] Generated component!

D:\Development\appiteasy>

Prima di proseguire, analizziamo insieme il comando IONIC GENERATE COMPONENT COMPONENTS\SHOW-HIDE-PASSWORD:

GENERATE consente la creazione di pagine, componenti e moduli; nel nostro caso abbiamo utilizzato il parametro COMPONENT per generare, appunto, un componente.
Con COMPONENTS\SHOW-HIDE-PASSWORD specifichiamo la cartella “components” come destinazione dei files appena creati, che verrà creata al percorso “src/app/” se non già presente, ed il nome “show-hide-password” per il nostro componente.

Mettiamo adesso le mani nel codice per personalizzare il componente appena aggiunto al nostro progetto. Avremo bisogno di modificare i seguenti files (di seguito il contenuto completo di ciascuno):

show-hide-password.component.html

<ng-content></ng-content>
<a class="type-toggle" (click)="toggleShow()">
   <ion-icon class="show-option" *ngIf="showPassword" name="eye-off-outline"></ion-icon>
   <ion-icon class="hide-option" *ngIf="!showPassword" name="eye-outline"></ion-icon>
</a>

show-hide-password.component.scss

:host {
    display: flex;
    width: 100%;
    align-items: center;
  .type-toggle {
      padding-inline-start: 0.5rem;
  .show-option,
      .hide-option {
        font-size: 1.2rem;
        display: block;
        // In case you want to use text instead of icons
        &:not(ion-icon) {
          text-transform: uppercase;
          font-size: 1rem;
        }
      }
    }
  }

show-hide-password.component.ts

import { Component, ContentChild, OnInit } from '@angular/core';
import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-show-hide-password',
  templateUrl: './show-hide-password.component.html',
  styleUrls: ['./show-hide-password.component.scss']
})
export class ShowHidePasswordComponent implements OnInit {
  public showPassword = false;

  @ContentChild(IonInput) ioninput: IonInput | undefined;

  constructor() {}

  ngOnInit() {}

  toggleShow() {
    if (this.ioninput != undefined) {
      this.showPassword = !this.showPassword;
      this.ioninput.type = this.showPassword ? 'text' : 'password';
    }
  }
}

Passiamo dunque alla generazione del modulo che, come anticipato, farà da collettore per i nostri componenti personalizzati. Sempre dal prompt dei comandi digitiamo:

D:\Development\appiteasy>ionic generate module modules\shared
> ng.cmd generate module modules\shared --project=app
CREATE src/app/modules/shared/shared.module.ts (192 bytes)
[OK] Generated module!

D:\Development\appiteasy>

Modifichiamo quindi il codice del modulo appena creato, per includervi il nostro componente personalizzato e renderlo disponibile per l’utilizzo nelle pagine dell’applicazione:

shared.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@ionic/common';
import { ShowHidePasswordComponent } from '../../components/show-hide-password/show-hide-password.component';

@NgModule({
  declarations: [ ShowHidePasswordComponent ],
  imports: [ CommonModule ],
  exports: [ ShowHidePasswordComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SharedModule {}

Prima di proseguire è utile concentrarsi brevemente sull’implementazione di questo modulo che farà da collettore dei nostri componenti personalizzati.

Come si evince dal codice, abbiamo specificato il nome della classe del nostro componente nella direttiva declarations oltre che nell’export del modulo @NgModule. Inoltre, abbiamo aggiunto un riferimento al CUSTOM_ELEMENTS_SCHEMA. Questi due accorgimenti consentono la “condivisione” del componente nelle classi che lo importeranno, oltre ad evitare errori del parser quando in fase di riconoscimento del codice HTML del componente.

Per spiegare meglio questo ultimo aspetto, provando a compilare l’applicazione eliminando il riferimento allo schema, questo sarebbe il risultato:

[ng] Error: src/app/components/show-hide-password/show-hide-password.component.html:3:4 - error NG8001: 'ion-icon' is not a known element:
[ng] 1. If 'ion-icon' is an Angular component, then verify that it is part of this module.
[ng] 2. If 'ion-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
[ng]
[ng] 3 <ion-icon class="show-option" *ngIf="showPassword" name="eye-off-outline"></ion-icon>
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A questo punto non ci resta che integrare la nostra libreria di modelli personalizzati nella pagina dove intendiamo utilizzarli. Prendendo ad esempio l’applicazione di default a schede, modifichiamo così il codice della pagina “tab1.page.html” per includere il campo di input per una password all’interno del componente personalizzato identificato dal tag <app-show-hide-password> che si occuperà di gestire la doppia modalità di Visualizza/Nascondi la password:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 1 page"></app-explore-container>

  <ion-item>
    <app-show-hide-password>
      <ion-input type="password"></ion-input>
    </app-show-hide-password>
  </ion-item>
</ion-content>

Ed infine, nel codebehind “tab1.module.ts” avremo l’import della nostra libreria di componenti “SharedModule“:

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { Tab1PageRoutingModule } from './tab1-routing.module';

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

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    SharedModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

Ci siamo! Con questi pochi e semplici (spero…) passaggi abbiamo imparato a generare un nuovo componente, modificarlo a nostro piacimento, creare una nostra libreria di modelli ed utilizzarla nelle pagine dell’applicazione richiamando un solo Import invece che tutti i singoli componenti personalizzati.

Sandman.it

Creare una libreria di componenti personalizzati in Ionic 7