Componenti Angular: cosa sono e come crearli

In questa guida vedremo cosa sono i componenti Angular e come crearli. Esamineremo i componenti e le loro importanti proprietà come i selector, i template, styleUrl, ecc.

Questa guida fa parte di Angular: la guida definitiva. Da stackblitz.com potrai scaricare i sorgenti. Il codice iniziale si trova qui ed il codice finale si trova qui.

Cosè un componente in Angular

Un componente è l’elemento principale di un’applicazione Angular. Un componente in ANgular contiene la logica di interazione dati e utente che definisce l’aspetto ed il comportamento della vista. Una vista in Angular fa riferimento ad un modello (html).

I componenti Angular sono semplici classi Javascript, sono definiti tramite il decoratore @Component. Questo decoratore fornisce al componente la vista per visualizzare i metadati della classe.

I componenti forniscono dati alla vista. Angular utilizza l’associazione di dati per farlo, il cosiddetto data binding. Questo viene fatto utilizzando uno speciale markup html noto come Angular Template Syntax. In questo modo il componente può anche sapere quando la vista viene modificata.

Le applicazioni Angular possono avere N componenti. Ogni componente viene dedicato a gestire una singola porzione dell’interfacciautente. Questo componenti lavorano insieme per fornire la ui dell’applicazione.

I componenti sono costituiti da tre elementi principali:

• Template
• Classi
• MetaData

Gli elementi di un Component in Angular

Template (view)

I template definiscono il layout della vista ed in sostanza, ciò che viene visualizzato sulla pagina. Senza il template, Angular non può eseguire correttamente il rendering sul DOM. I template in Angular sono creati con semplice html, è possibile aggiungere direttive e binding. Due sono i modi possibili per specificare un template all’interno di un componente:

• Template Inline
• External Template

Classi

Le classi sono associate al template. Le classi vengono create solitamente con typescript ma è possibile anche utilizzare javascript. Le classi possono contenere proprietà e metodi. Le proprietà di una classe possono essere collegate ad una view tramite data binding. Una semplice classe angular:

export class AppComponent
{
  name : string = "Angular"
}

Le classi Component in Angular hanno il prefisso Component per essere indicate facilmente.

Metadata

I Metadata forsiscono ulteriori informazioni al componente Angular. Angular utilizza dette informazioni per elaborare la classe. I metadata sono definiti tramite decoratori.

Un decoratore è una funzione che aggiunge metadati alla classe, ai suoi metodi ed alle sue proprietà. I componenti sono definiti con il decoratore @Component. Il decoratore @Component definisce quindi la classe come un Componente di Angular.

Il decoratore @Component

Una classe diventa un componente in Angular quando si utilizza il decoratore @Component. Un decoratore ha sempre il prefisso @. Il decoratore deve essere posizionato immediatamente prima della definizione della classe. Inoltre è possibile realizzare decoratori personalizzati. I decoratori sono simili agli attributi in #c.

Le proprietà dei componenti

Selector

Specifica un tag tramite il quale la nostra vista che rappresenta il componente viene posizionata nel progetto Angular.

Providers

I provider sono i servizi che verranno utilizzati dal componente. I servizi forniscono dati al componente o ad altri servizi.

Directives

Le direttive che utilizza il componente.

Styles/styleUrls

Gli stili CSS o il foglio di stile di cui ha bisogno il componente. Possiamo usare un foglio di stile esterno (usando styleUrls) o stili incorporati (utilizzando styles), detti stili sono specifici del componente.

template/templateUrl

Il modello HTML che definisce la nostra vista. Indica ad Angular come eseguire il rendering della vista del componente. I template possono essre in linea (con template) oppure si può utlizzare un file esterno (templateUrl). Un componente può avere solo un modello. Puoi utilizzare un modello incorporato o un template esterno.

Come creare un Componente in Angular

Ho già scritto un contenuto su come creare un’applicazione Angular da zero. Nella guida ho utilizzato la Angular CLI per creare i componenti automaticamente. In questa guida non creerò un componente tramite la Angular CLI, vedremo nel dettaglio ogni sua parte e lo realizzeremo a mano. La creazione di un componente Angular richiede gli step sotto elencati:

• Creazione di un file per il componente
• Importazione dell’oggetto Component da Angular Core
• Creazione della classe del componente e della sua esportazione
• Aggiunta del decoratore @Component
• Aggiunta dei metadati al decoratore @Component
• Creazione del Template (View)
• Aggiunta degli stili CSS
• Registrazione del componente creato all’interno del modulo

Creazione di un file per il componente

Il Componente app.component.ts viene creato dopo aver lanciato tramite la Angular CLI il comando per la creazione di un nuovo progetto, si trova all’interno della cartella src.
Per convenzione, il nome del file inizia con il nome del componente, seguito dal tipo di classe (component). Quanto detto viene separato da un punto. L’estensione usata è .ts, ciò va ad indicare che questo è un file typescript. Puoi leggere di più in merito alle estensioni dei file in Angular nella guida dedicata su angular.io

Importazione dell’oggetto Component da Angular Core

Prima di poter usare qualsiasi classe o funzione in Angular o esterna, occorre informare Angular come e dove trovarla. Questo viene fatto usando l’istruzione import. L’istruzione import è simile all’istruzione using in #c, la quale consente di utilizzare moduli esterni in una classe.
Per definire la classe Component, dobbiamo usare il decoratore @Component. Questa funzione si trova nella libreria core di Angular. Quindi scriviamo l’import:

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

Creazione della classe del componente e della sua esportazione

Il terzo step consiste nella creazione della classe Component utilizzando la parola chiave export. Tale parola chiave permette di utilizzare questa classe in altri componenti semplicemente eseguendo un import. Scriviamo quindi la classe:

export class AppComponent {
  title = 'app';
}

Come puoi notare ho usato la denominazione Pascal Case per il nome della classe. Nella classe viene definita una proprietà denominata title a cui è assegnato il valore predefinito ‘app’.

Aggiunta del decoratore @Component

Il prossimo step consiste nell’informare Angular che si tratta di una classe Component. Questo viene fatto aggiungendo il decoratore @Component alla classe. Il decoratore deve essere aggiunto immediatamente sopra la classe come mostrato di seguito:

@Component({
})
export class AppComponent {
  title = 'app';
}

Aggiunta dei metadati al decoratore @Component

Il prossimo step consiste nell’aggiungere i metadati al decoratore @Component. Vediamo come:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

selector

Angular posiziona la vista (il template) all’interno del selettore app-root

templateUrl

Nell’esempio ho utilizzato un template esterno usando templateUrl. TemplateUrl punta al file html esterno app.component.html.

styleUrls

Definisce gli stili per il nostro modello. I metadati puntano al file css esterno app.component.css. GLi stili CSS specifici dei componenti possono essere specificati qui.

Creazione del Template (View)

Il template non è altro che un file html. Anglar sa quale template visualizzare, utilizzando i metadato relativo al templateUrl, che punta a app.component.html.

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki" rel="noopener noreferrer">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://blog.angular.io//" rel="noopener noreferrer">Angular</a></h2>
  </li>
</ul>

Per convenzione il file prende il nome dal nome del componente a cui è associato.
Si tratta di semplice html, ad eccezione del contenuto del tag h1:

  <h1>
    Welcome to {{title}}!
  </h1>

Il contenuto all’interno delle doppie parentesi graffe, durande il rendering della view, Angular lo cerca nel componente e lega la proprietà alla view. Tale operazione viene definita binding.

La sintassi della deppia parentesi graffa è nota come interpolazione.

Aggiunta degli stili CSS

Il prossimo step consiste nell’aggiungere gli stili CSS. I metadati di styleUrl indicano ad Angular deve trovare il file css. Qusta proprietà punta al file esterno app.component.css.

Per convenzione, il file prende il nome dal componente a cui è associato con l’estensione .css

I metadati di StyleUrls possono accettare anche più file css.

Registrazione del componente creato all’interno del modulo

Abbiamo creato il componente Angular. Il prossimo stem consiste nel registrarlo all’interno del modulo.

Il modulo in Angular organizza i componenti, le direttive, le pipe e i servizi che sono correlati e li organizza in blocchi coerenti di funzionalità.

Nel caso del modulo, abbiamo il decoratore @ngModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Viene usato il decoratore @ngModule per definire un modulo e per fornire i metadati.

Al modulo vengono aggiunti tutti i componenti, le pipe e le direttive che fanno parte del modulo nell’array delle declarations.
Il componente che va caricato per primo all’avvio del modulo principale viene dichiarato nella proprietà bootstrap.

Importiamo quindi AppComponent

import { AppComponent } from './app.component';

e quindi lo aggiungiamo all’array delle declarations

@NgModule({ 
  declarations: [ AppComponent ],

Vogliamo che appComponent venga caricato all’avvio di Angular, quindi lo assegniamo alla proprietà bootstrap.

bootstrap: [AppComponent]

Infine, eseguiamo l’applicazione dalla riga di comando usando ng serve (o npm start).

Creare Template e Stili in linea nel componente Angular

Nell’esempio che abbiamo visto ho utilizzato file esterni sia per il template che per gli stili css.

È possibile anche specificare il template e gli stili direttamente in linea usando la proprietà template e styles dei metadati @Component, vediamo come:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: '<h1> {{title}} works </h1>',
  styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
  title = 'app';
}

Il template puù diventare piùttosto consistente. Nel caso di un template multilinea, è possibile utilizzare la notazione BackTick (`).

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
          <h1> {{title}} </h1>
          <p> works </p>
           `,
  styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
  title = 'app';
}

Specificare i template e gli stili in linea ha pochi svantaggi. Il template però può diventare piuttosto grande e rendere il codice difficilmente leggibile. Quindi consiglio di utilizzare un template in linea solo in quei casi è indispensabile e comunque quando si tratta di poche linee di codice.

Approfondimento sul Selector

Quando costruiamo componenti Angular, in realtà stiamo costruendo nuovi elementi HTML. Specifichiamo il nome dell’elemento HTML nella proprietà selector dei metadati del componente. E poi lo usiamo nel nostro HTML.

Angular, durante l’istanza del componente, cerca il selettore nel file HTML e rende il modello associato al componente.

Selector utilizzando il nome di una classe CSS

@Component({     
  selector: '.app-root' 
})

Dove nel markup HTML viene utilizzata quella specifica classe css

<div class="app-root"></div>

Selector utilizzando il nome di un attributo

 @Component({ selector: '[app-root]' })

Dove nel markup HTML viene utilizzato come segue

<div app-root></div>

Selector utilizzando nome e valore

 @Component({     
   selector: 'div[app=components]' 
}) 

Dove nel markup HTML abbiamo

<div app="components"></div>