Nella versione 16 di Angular, è stata introdotta la capacità di definire stili a livello di libreria, senza che influenzino globalmente l'applicazione. Questo approccio, che può sembrare scontato, non era facile da raggiungere, in quanto per implementare uno stile all'interno della libreria, bisognava disabilitare la ViewEncapsulation, espandendo però il contesto del CSS al di fuori della libreria.
// precedentemente a Angular 16 @Component({ selector: 'my-component', templateUrl: './my.component.html', styleUrls: ['./my.component.scss'], encapsulation: ViewEncapsulation.None })
Per dimostrare il nuovo funzionamento, è necessario avere o creare una nuova libreria Angular. All'interno di un progetto già esistente eseguiamo il comando:
ng generate library mia-libreria
Procediamo creando un foglio di stile per il componente.
.titolo { font-size: 20px; color: #333; }
E aggiungiamo la reference nel componente.
import { Component } from '@angular/core'; @Component({ selector: 'lib-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.scss'] }) export class MyComponentComponent {}
Al termine di ogni modifica ricordiamoci di eseguire la build della libreria per aggiornare il pacchetto che verrà poi importanto all'interno dell'applicazione.
ng build mia-libreria
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Integrare un servizio esterno con .NET Aspire
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Il nuovo controllo Range di Blazor 9
Ordine e importanza per @layer in CSS
Testare il failover sulle region in Azure Storage
Scrivere selettori CSS più semplici ed efficienti con :is()
Creare una libreria CSS universale: Clip-path
Ottimizzare le performance usando Span<T> e il metodo Split
Creare una libreria CSS universale: i bottoni
Recuperare App Service cancellati su Azure
Estrarre dati randomici da una lista di oggetti in C#
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8