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