Utilizzare gli elementi Angular – Perché e come – Parte 1
Inizio
Iniziamo creando un nuovo progetto Angular nel nostro sistema. Per questo, assicuratevi di avere l’ultima versione di Angular CLI installata. Esegui il seguente comando nel tuo terminale:
$ npm install -g @angular/cli
Una volta che questa installazione è completa, possiamo usarla per creare una nuova applicazione iniziale nel nostro sistema come questa:
$ ng new angular-app
Ti verrà quindi chiesto di selezionare le caratteristiche aggiuntive che potresti voler aggiungere al tuo progetto Angular, cose come il routing e il tipo di formato del foglio di stile. Seleziona la risposta predefinita premendo il tasto Enter/Return.
La CLI installa i pacchetti Angular necessari e le dipendenze in una cartella chiamata angular-app. Puoi servire questa applicazione al browser eseguendo i seguenti comandi:
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Come puoi vedere, l’app contiene già alcune cose che possiamo visualizzare sullo schermo. Ma non ne abbiamo bisogno. Quindi tornate al vostro editor di codice (io ❤️ VS Code) e cancellate tutto all’interno del file src/app/app.component.html e scrivete un solo elemento <h1>.
<h1>Welcome To Angular Elements!</h1>
Se date un’occhiata alla struttura dei file, vedrete che ogni componente in angular consiste in una moltitudine di file. Per il solo componente App, c’è un file .ts, .html, .css, e un file spec.ts che contiene i test, e un file module.ts. Ci sarà anche un file routing.module.ts opzionale se avete scelto di aggiungere la funzione di routing all’applicazione mentre la create usando la CLI.
Invece di scrivere tutti questi file per i nostri componenti, Angular CLI ci dà un metodo abbreviato che genererà questi file per noi. Usiamo questo metodo per creare un componente HelloWorld nel nostro sistema.
$ ng g c HelloWorld
Questo singolo comando creerà una cartella chiamata hello-world dentro la cartella app. Se aprite questo file, troverete questi 4 file al suo interno:
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
Noi useremo solo il file .html e .ts. Ci sono altri flag che possiamo passare al comando ng g c. Ma per mantenere le cose semplici e puntuali, non le userò. Controlla Angular Docs per saperne di più su come usare questo comando.
Nel file hello-world.component.ts, vedrai che il selector è impostato su app-hello-world. Quindi, se aggiungi questo al app.component.html in questo modo:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Allora il contenuto di hello-world.component.html sarà visualizzato nel browser.
La nostra configurazione iniziale è ora pronta. Cominciamo con l’uso di Angular Elements.
Convertire un componente in un elemento personalizzato
In questo momento, abbiamo un semplice componente HelloWorld che stampa semplicemente del testo sullo schermo. Diamo un’occhiata a come possiamo inserire questo componente nell’applicazione in modo più dinamico. Per farlo, sostituiamo il app-hello-world con un div e un button. Aggiungiamo anche l’ascoltatore click al button, in modo che quando qualcuno fa clic sul pulsante, il componente HelloWorld possa essere visualizzato. Questo sarà gestito da una funzione showMessage(). Quindi vai alla pagina app.component.html e fai queste modifiche:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
Poi dobbiamo definire la funzione showMessage() nel file app.component.ts. Qui useremo la normale manipolazione DOM per ottenere il div selezionandolo con il suo id di hello. Poi, applicheremo la funzione innerHTML per inserire il componente app-hello-world in questo modo:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
Potete andare nel vostro browser e cliccare sul pulsante, ma vi dico subito che non succederà nulla. Ma poi di nuovo, se vai negli strumenti di sviluppo del browser e guardi lì, vedrai che il componente HelloWorld è inserito.
La ragione per cui non possiamo vedere il componente sullo schermo è che Angular non può riconoscere il tag app-hello-world poiché è stato inserito nel template dinamicamente. Angular ha bisogno che tutti gli elementi siano presenti nel template, oppure è necessario utilizzare la fabbrica di componenti dinamici per istanziare il componente in fase di esecuzione attraverso il vostro codice.
È qui che entra in gioco Angular Elements. Usando Angular Element, tutto quello che dobbiamo fare è inserire il tag dinamicamente, e Angular stesso istanzierà il componente per noi. Vediamo finalmente come utilizzare questo componente nella nostra app. Per prima cosa, usate il comando ng add per installare Angular Elements nella nostra app:
$ ng add @angular/elements
Una volta installato, andate in app.module.ts e fate le seguenti modifiche al @NgModule:
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Poi nella classe AppModule, scrivete una funzione constructor per creare una nuova istanza del createCustomElement e passategli il HelloWorldComponent come mostrato qui sotto:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Insieme al componente, dobbiamo anche passargli il injector. Il injector è qualcosa che usiamo per risolvere le dipendenze. Con questo, abbiamo creato un’istanza del HelloWorldComponent come elemento personalizzato. Possiamo quindi utilizzare l’API customElements per definire il tag del componente come app-hello-world.
customElements.define('app-hello-world', custom);
Torna al file hello-world.component.ts e rimuovi/commenta il selector dentro la sezione @Component. In questo modo, Angular non si confonderà e saprà usare l’elemento personalizzato che abbiamo appena creato.
Riesegui il comando ng serve --open per assicurarti che Angular prenda tutte le modifiche che abbiamo appena fatto.
C’è una buona possibilità che il pulsante non mostri ancora il HelloWorldComponent. Questo può essere dovuto al fatto che Angular “non riesce a costruire l’HTMLElement”. Per risolvere questo problema, installate i polyfill webcomponentjs:
$ yarn add @webcomponents/webcomponentsjs
Poi, andate nel file polyfills.ts e importate quanto segue:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Finalmente! Il nostro elemento personalizzato verrà visualizzato sullo schermo quando clicchiamo su quel pulsante.
