Come creare template dinamici e gestire eventi
Pubblicato il 23/09/2023 da alnao nella categoria Angular & Ionic

In Angular, un template è un frammento di un’interfaccia grafica utente (UI), spesso in italiano viene confuso con il nome “modulo” ma conviene abituarsi ad usare il termine originale in inglese. I template sono scritti in HTML e all’interno è possibile utilizzare una sintassi speciale per sfruttare molte delle funzionalità di Angular che estende la sintassi HTML, questa tecnica permette di creare contenuti dinamici modificando le proprietà del documento (DOM). La sintassi HTML deve essere valida e il fratello non deve includere tag base come <html> e <body> visto che sono gestiti dal framework.

  • La prima tecnica, chiamata Interpolation, prevede l’uso dei limitatori {{ e }} per visualizzare variabili o richiamare metodi della classe corrispondente al template, per esempio se in un template è presente una proprietà è possibile visualizzare la variabile nel template. Per esempio <div >Benvenuto {{name}}</div>
  • La seconda tecnica, chiamata Template statements, permette di gestire eventi nei template richiamando metodi nella classe corrispondenti, a qualsiasi oggetto DOM è possibile associare un evento con le parentesi tonde e indicare il nome del metodo richiamato. Per esempio <button type="button" (click)="changeName()" 
  • La terza tecnica, chiamata Property binding, permette di gestire proprietà e oggetti DOM da valori o metodi della classe richiamando il valore con le parentesi quadre. Per esempio <button type="button"[disabled]="isDisabled"
  • La quarta tecnica, chiamata Event binding, permette di gestire eventi specifici come l’inserimento dei tasti tramite sottoeventi con metodi specifici. Per esempio e(keydown.shift.t)="onKeydown($event)"
  • Altre tecniche come le direttive input-output e gli eventEmitter saranno introdotti in specifici articoli.

Angular poi mette a disposizione alcune proprietà chiave per la gestione di alcuni casi specifici molto frequenti:

  • ndClass: utlizzata per la gestione delle classi in maniera dinamica usando le operazioni ternarie o metodi della classe corrispondente. Per esempio <p [ngClass]="isDisabled ? 'textRed' : 'textGreen' ">
  • *ngFor: utile per gestire cicli in maniera dinamica usando come base un elenco presente nella classe del componente. Per esempio <span *ngFor="let figlio of lista">{{figlio}} </span>
  • *ngIf: utile per gestire la visibilita di oggetti DOM con una condizione, spesso viene usata una proprietà della classe del componente. Per esempio <div *ngIf="!isDisabled">...</div>

Tutte queste tecniche sono molto usate nei progetti e devono essere ben conosciute in quanto permettono di separare le logiche presenti nelle classi e la rappresentazione grafica del template. Un semplice esempio completo con queste tecniche in un template in-line:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-nome-componente-due',
  template: `<div >
    Benvenuto {{name}}
    <button type="button" (click)="changeName()" [disabled]="isDisabled">
      Cambia nome</button>
    <div *ngIf="!isDisabled">Clicca il bottone per scoprire</div>
    <input (keydown.shift.t)="onKeydown($event)" />
    <div [ngSwitch]="name" [ngClass]="isDisabled ? 'textRed' : 'textGreen' ">
      <div *ngSwitchCase="'Alberto Nao'" >Fratello minore</div>
      <div *ngSwitchCase="'Andrea Nao'" >Fratello maggiore
        <br />figli: <span *ngFor="let figlio of lista">{{figlio}} </span>
      </div>
    </div>
    <div><ng-content></ng-content></div>
  </div>`,
  styleUrls: ['./nome-componente-due.component.css']
})
export class NomeComponenteDueComponent implements OnInit {
  constructor() { }
  name = 'Alberto Nao';
  isDisabled=false;
  lista=['Alice','Elena','Achille','Ettore'];
  ngOnInit(): void { }
  changeName(){
    this.name="Andrea Nao";
    this.isDisabled=true;
  }
  onKeydown(event:any){// console.log(event)
    console.log( "E' stato premuto la lettera "+event.key+" " );
  }
}

La documentazione ufficiale è ricca di esempi e descrive molto bene tutte le tecniche utilizzabili nei template Angular.

MENU