• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Magazine
    • Backend
    • Dev community
    • Carriere tech
    • Intelligenza artificiale
    • Interviste
    • Frontend
    • DevOps/Cloud
    • Linguaggi di programmazione
    • Soft Skill
  • Talent
    • Discover Talent
    • Jobs
    • Manifesto
  • Companies
  • For Business
    • EN
    • IT
    • ES
  • Sign in
ads

Davide PassafaroMarzo 27, 2024

Angular HostAttributeToken: nuova vita agli attributi

Linguaggi di programmazione
angular token ainject attributes by davide passafaro at codemotion magazine. HostAttributeToken
facebooktwitterlinkedinreddit

Negli ultimi mesi Angular è evoluto rapidamente, introducendo nuove funzionalità e tantissimi miglioramenti, molti dei quali con l’obiettivo di migliorare manutenibilità e prestazioni.

In questo articolo parleremo di una novità introdotta da Angular v17.3.0: la nuova classe HostAttributeToken.

Recommended article
Maggio 7, 2025

Evitare la duplicazione del codice sfruttando le high-order function in JavaScript

Fabrizio Tedeschi

Fabrizio Tedeschi

Linguaggi di programmazione

Questa nuova API ci consente di iniettare gli attributi dell’elemento host utilizzando la funzione inject( ), similmente a come funziona il decoratore @Attribute.

Il decoratore @Attribute è forse il decoratore di Angular meno conosciuto.
Dunque, prima di approfondire il funzionamento della classe HostAttributeToken, prendiamoci un momento per rivederlo insieme.


@Attribute: ci serve veramente un input?

Partiamo da uno scenario semplice in cui vogliamo sviluppare un componente in grado di accettare una variabile di configurazione dall’esterno.

Nello specifico, vogliamo fornire questa proprietà come una costante string literal, perché non ci serve aggiornarla a runtime:

<my-divider size="small" />
Code language: HTML, XML (xml)

Non ci serve far altro che creare un input per quella proprietà:

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

export type DividerSize = 'small' | 'big';

@Component({
  selector: 'my-divider',
  template: '<hr [class]="size" />',
  standalone: true,
})
export class MyDivider {
  @Input() size: DividerSize;
}
Code language: TypeScript (typescript)

Ben fatto, grazie a questo input il nostro componente riceve il valore di configurazione.
Ma forse è un po troppo…

Creando un input, stiamo chiedendo ad Angular di creare un binding a quella proprietà, e quindi di controllarla durante ogni ciclo di change detection.

Questo è davvero troppo, a noi basta che la proprietà venga controllata solo una volta durante l’inizializzazione del componente. 🤯

Per migliorare le performance possiamo iniettare piuttosto l’attributo host-element nel costruttore grazie al decoratore @Attribute:

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

export type DividerSize = 'small' | 'big';

@Component({
  selector: 'my-divider',
  template: '<hr [class]="size" />',
  standalone: true,
})
export class MyDivider {
  constructor(@Attribute('size') size: string) {}
}
Code language: TypeScript (typescript)

Usando @Attribute, Angular leggerà il valore solo una volta e mai più.

Nota: questo approccio funziona anche con le Direttive!


Ora che abbiamo rivisto le basi, passiamo all’argomento principale di questo articolo: la nuova classe HostAttributeToken.

Iniettare un attributo utilizzando la classe HostAttributeToken

Dopo il rilascio di Angular 14, esiste ora un nuovo approccio per iniettare i provider senza utilizzare il costruttore: la funzione inject.

Finora, la funzione di inject ci ha permesso di iniettare facilmente componenti, direttive e pipe, ma non vi era modo di iniettare attributi.

Ed è proprio per questo scopo che è stata introdotta la classe HostAttributeToken:

import { Component, HostAttributeToken, inject } from '@angular/core';

export type DividerSize = 'small' | 'big';

@Component({
  selector: 'my-divider',
  template: '<hr [class]="size" />',
  standalone: true,
})
export class MyDivider {
  size: string = inject( new HostAttributeToken('size') );
}
Code language: JavaScript (javascript)

Utilizzando classe HostAttributeToken all’interno della funzione inject, possiamo ottenere il valore di un determinato attributo.

Questa nuova API funziona in modo simile a @Attribute, con una notevole differenza: invece di restituire null quando manca l’attributo, solleva un errore.

🔥 Error: NG0201: No provider for HostAttributeToken size found. 🔥

Questa modifica è stata introdotta per allineare il comportamento a quello degli altri injection token.


Grazie per aver letto questo articolo 🙏

Mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento. 👋

Infine, se ti è piaciuto davvero tanto, condividilo con la tua community. 👋😁

Codemotion Collection Background
Dalla community
Selezionati per te

Vuoi scoprire più articoli come questo? Dai un’occhiata alla collection Dalla community dove troverai sempre nuovi contenuti selezionati dal nostro team.

Share on:facebooktwitterlinkedinreddit

Tagged as:Angular

Davide Passafaro
Devin: il nuovo strumento di programmazione AI end-to-end
Previous Post
OpenDev Explorer – Episodio 3 OramaSearch: Non è il trovare, ma il cercare
Next Post

Footer

Discover

  • Events
  • Community
  • Partners
  • Become a partner
  • Hackathons

Magazine

  • Tech articles

Talent

  • Discover talent
  • Jobs

Companies

  • Discover companies

For Business

  • Codemotion for companies

About

  • About us
  • Become a contributor
  • Work with us
  • Contact us

Follow Us

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions