Qu'est-ce qu'un single file component ?

Par défaut, lorsque vous générez un composant avec la CLI, cela génère un fichier CSS et HTML séparés du fichier TS.

Mais il est aussi possible d'avoir un composant avec un seul fichier qui réunit le CSS, le HTML et le TS.

C'est ce qu'on appel un single file component.

Dans quel cas est-ce pertinent d'en utiliser ?

Alors dans quel cas est-ce utile ?

Avant toute chose il faut savoir qu'Angular ne recommande pas d'utiliser cette méthode, ceci dit elle peut être envisagée dans le cas où votre composant contient un template et un style très simples ! Ou pas de template du tout (utile dans certains cas).

Cela permettra d'alléger votre application.

Comment créer un single file component ?

Quand vous générez votre composant, dans le décorateur Component remplacez les metadatas templateUrl et styleUrl par template et styles.

Pour template une string est attendue et pour styles un tableau. Si vous voulez faire une string multi-ligne, pensez à utiliser des back quotes ``

1
2
3
4
5
@Component({
    selector: 'app-page',
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.css']
  })

1
2
3
4
5
6
@Component ( {
    selector : 'app-page' , 
    template : `<h1>Super titre</h1>
                <p>Paragraphe quelconque</p>` , 
    styles : [ 'h1 { color : blue }' ] , 
  } )

Maintenant vous pouvez simplement supprimez le fichier CSS et HTML du dossier de votre composant.

Avec la CLI

Vous pouvez également utiliser la CLI pour générer directement un single file component avec cette commande :

1
ng g c your-component --inline-style --inline-template

Conclusion

C'est tout pour cet article sur le single file component, en espérant que cela vous soit utile.

N'hésitez pas à laisser un commentaire !