Aller au contenu principal

6-7 Styles

Style du composant​

Vous avez surement remarqué l'attribut styles dans le décorateur de @Component.

@Component({
  selector: 'app-projets-liste',
  imports: [],
  template: `
    <button (click)="ajouterProjet()">Ajouter un projet</button>
    
    @if(projets.length > 0){
    <ul>
      @for(projet of projets; track $index) {
      <li>{{ projet }}</li>
      }
    </ul>
    } @else {
      <p>Aucun projet</p>
    }
  `,
  styles: ``
})

Vous pouvez mettre à l'intérieur n'importe quel CSS ou SCSS valide et ce dernier sera appliqué au composant. Les styles associés au composant seront appliqués uniquement à ce composant, pas au reste de l'application.

Par exemple, changeons simplement le style des points de forme de la liste:

@Component({
  selector: 'app-projets-liste',
  imports: [],
  template: `
    <button (click)="ajouterProjet()">Ajouter un projet</button>

    @if(projets.length > 0){
    <ul>
      @for(projet of projets; track $index) {
      <li>{{ projet }}</li>
      }
    </ul>
    } @else {
      <p>Aucun projet</p>
    }
  `,
  styles: `
    ul {
      list-style-type: circle;
    }
  `
})

Vous remarquerez que le style change dans votre navigateur, mais aussi que Angular ajoute un préfixe au composant et au sélecteur CSS afin que le style s'applique seulement au composant ciblé!

img

De plus, vous pouvez utiliser le SCSS, par exemple le principe d'imbrication de SCSS:

styles: `
  ul {
    list-style-type: circle;

    li {
      font-weight: bold;
    }
  }
`
info

Remarquez l'imbrication du li dans le ul pour créer automatiquement le sélecteur ul li.

Le SCSS et les styles avancés sont plus une notion de Web 2, donc nous ne reviendrons pas en détail sur cet aspect, mais sachez que vous pouvez utiliser du SCSS dans la section styles du composant.

Styles généraux​

Pour les styles généraux, par exemple qui ne sont pas liés à un composant spécifique, le fichier src/style.scss peut être utilisé.

Nous verrons au prochain niveau comme structurer efficacement le SCSS dans ce fichier afin qu'il reste lisible et facile à maintenir.

Level Up