Styliser vos composants avec host

Parfois on a besoin d’ajouter du style directement sur la balise du composant. Voici une manière non-efficace de le faire :

❌ BAD
// app.component.html
// j'ajoute ma class css sur le composant manuellement
<app-product class="some-class"></app-product>

ou encore

❌ BAD
// product.component.html
// je créé une div superflue juste pour ajouter ma class à l'intérieur de mon composant
<div class="some-class">
  ...
</div>

Le premier exemple n’est pas correct car cette class css n’est censé concerner que mon composant app-product, et là je me retrouve à la déclarer dans le parent, de plus si je dois changer les class, je vais devoir le faire à tous les endroits où j’ai utilisé mon app-product. Le deuxième exemple n’est pas correct non plus car je créé une div supplémentaire juste pour du css, ce qui est un peu dommage.

Mais il y a bien mieux !

// product.component.css
:host {
  padding: 1rem;
  ...
}

Le pseudo-selecteur :host va cibler la balise du composant directement (qu’on appelle le host), en l’occurrence <app-product></app-product>, ainsi on peut ajouter du style directement sur nos composants sans avoir à ajouter une div en plus ou une class css lors de l’utilisation du composant !

On peut aussi ajouter des class CSS directement sur le host comme ceci :

@Component({
  selector: 'app-product',
  host: {
    class: 'p-4 bg-gray-300 flex'
  },
  template: '...'
})

En utilisant la propriété host dans l’objet du decorator @Component, on peut lui préciser une liste de class à ajouter sur la balise app-product, c’est très utile surtout si on utilise tailwindcss par exemple !

Ainsi, si j’utilise mon composant <app-product /> lors de la compilation j’obtiendrai <app-product class="p-4 bg-gray-300 flex"></app-product>.