Creare una direttiva con Ionic

  • Di
  • 2022-06-23 - 4 minuti
banner

Ah, le direttive… In Angular vengono utilizzate moltissimo per personalizzare il comportamento di un componente. Il grande vantaggio di Ionic è la possibilità di integrarlo con diversi framework, tra cui Vue, React, Stencil e soprattutto Angular.

Ma come funzionano?

In questo articolo, vediamo come creare una direttiva con Ionic, e naturalmente Angular!

Cosa vedrai

Cosa sono

Una direttiva si usa per modificare il comportamento di un elemento DOM esistente.

In altre parole, si usa quando vogliamo che un componente abbia un suo comportamento rispetto ad un evento o ad uno stato.

Un componente si usa quando desideri un elemento DOM completamente nuovo; altrimenti, un componente e una direttiva sono praticamente la stessa cosa: un componente è solo una direttiva con il proprio modello!

Quando usarle

Le direttiva possono essere utilizzate per diversi scopi: ad esempio, per creare una risorsa custom, come può essere un panel, che non è magari previsto dal framework che utilizziamo.

Un altro motivo per cui possiamo scegliere le direttive è quello di modificare il comportamento di un elemento: ad esempio, se volessimo far “sparire” un elemento, quando l’utente ci clicca sopra.

Non a caso, una direttiva può essere dichiarata in questo modo: nel primo esempio, c’è una direttiva che descrive un componente; nel secondo caso, c’è un componente che contiene una direttiva custom.

<my-component></my-component>

<some-ionic-component myDirective></some-ionic-component>

Creare una direttiva con Ionic

Vediamo adesso un esempio pratico di come crearne una con Ionic e lo facciamo usando l’esempio visto prima: creiamo una direttiva che nasconda un elemento una volta che l’utente ci clicca sopra.

Per prima cosa, andiamo a creare una direttiva usando il comando seguente:

ionic generate directive clickdirective

Ci verrà creato un file che si chiama click-directive.directive.ts, che andremo ad analizzare:

clickdirective.directive.ts 

import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';

@Directive({
  selector: '[appClickDirective]'
})
export class ClickDirectiveDirective {

 ...

All’interno del decoratore @Directive, è specificato un selettore che di default viene chiamato come il nome della direttiva con il prefisso app; nel nostro caso, avremo quindi appClickDirective. Possiamo cambiarlo come vogliamo, ovviamente!

Il resto della classe è vuota, e la andiamo a costruire step-by-step. Per farlo, andiamo a importare all’interno del costruttore due risorse, ossia ElementRef e Renderer2. Questi ci permetteranno di gestire i componenti HTML e modificarne comportamento e stile:

clickdirective.directive.ts 

import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';

@Directive({
  selector: '[appClickDirective]'
})
export class ClickDirectiveDirective {

  constructor(public element: ElementRef, public renderer: Renderer2) { }
...

Nello specifico, ElementRef serve a fornirci l’accesso diretto all’elemento presente nel DOM, che sarà disponibile attraverso una proprietà chiamata nativeElement. Se volessimo accedere ad un elemento DOM, potremo accedervi usando l’istruzione this.element.nativeElement.

Una volta che abbiamo un riferimento a quell’elemento DOM, potremmo modificarlo come desideriamo accedendo direttamente alle sue proprietà -proprio come faresti con JavaScript-.

_Renderer_2 invece ci aiuta a modificare l’elemento fornito da ElementRef, così che saremo in grado di aggiornare l’elemento.

Per utilizzare _Renderer_2, dobbiamo fornirgli il nativeElement che vogliamo “manipolare” direttamente e utilizzare i metodi che mette a disposizione per modificare l’elemento del DOM.

Alcuni esempi di questi metodi sono:

  • setStyle
  • addClass
  • createElement
  • setAttribute
  • ecc.

A questo punto, creiamo una funzione che abbia il decoratore @HostListener, il quale ci permette di specificare per quale evento o stato essere “in ascolto”, e in questo caso specifichiamo l’evento click tramite i due parametri:

clickdirective.directive.ts 

...  
@HostListener('click', ['$event'])
...

Nella funzione, andiamo a utilizzare Renderer2 per cambiare lo stile dell’elemento su cui l’utente andrà a cliccare, e lo faremo settando l’opacità a zero.

Questo è solo un esempio di quel che possiamo fare grazie ai due oggetti importati nel costruttore, ma le possibilità sono davvero infinite!

clickdirective.directive.ts 


...
 handleClick(event) {
    console.log('Element has been clicked');
    this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
  }
...

La direttiva è quindi pronta per essere utilizzata: in un altro componente, andiamo a creare una veloce lista di messaggi che l’utente potrà usare per spuntare quelli che ha già letto. Il codice seguente verrà quindi modificato come segue:

message.component.html


...
<ion-item *ngIf="message" [routerLink]="'/message/' + message.id" [detail]="false">
  <div slot="start" [class]="!message.read ? 'dot dot-unread' : 'dot'"></div>
  <ion-label class="ion-text-wrap">
    <h2>
      {{ message.fromName }}
      <span class="date">
        <ion-note>{{ message.date }}</ion-note>
        <ion-icon name="chevron-forward" size="small" *ngIf="isIos()"></ion-icon>
      </span>
    </h2>
    <h3>{{ message.subject }}</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </ion-label>
  </ion-item>
...

All’interno del componente ion-item, inseriamo la direttiva appClickDirective, che agirà seguendo le azioni dell’utente: quando questo cliccherà su uno dei messaggi, il messaggio sparirà:

message.component.html

<ion-item appClickDirective *ngIf="message" [routerLink]="'/message/' + message.id" [detail]="false">
 ... 
 </ion-item>

[video width=“auto” height=“50%” mp4=“http://35.180.247.192/wp-content/uploads/2022/04/Ionic-App-–-Mozilla-Firefox-2022-04-12-10-27-53-online-video-cutter.com_.mp4”][/video]

Semplice, no? 😉

Risorse utili

Post correlati

Partners

Community, aziende e persone che supportano attivamente il blog

Logo di Codemotion
Logo di GrUSP
Logo di Python Milano
Logo di Schrodinger Hat
Logo di Python Biella Group
Logo di Fuzzy Brains
Logo di Django Girls
Logo di Improove
Logo del libro open source

Iscriviti alla newsletter

Per non perderti gli ultimi articoli e per vincere biglietti e gadget TheRedCode

Riceverai una volta al mese (o anche meno) gli articoli più interessanti pubblicati sul blog, e potrai provare a vincere un biglietto per uno dei prossimi eventi!

Andiamo!