Estilos e Templates de Componentes - Angular

A estilização de um componente pode ser feita tanto através da definição de estilos diretamente no componente quanto pela inclusão de arquivos CSS externos.

Para definir estilos diretamente, a diretiva @Component possui a propriedade styles:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    template: `<h1>Hello Angular</h1>
                <p>O aplicativo Angular é composto por componentes</p>`,
    styles: [` 
            h1, h2 { color: red; }
            p { font-size: 13px; font-family: Verdana; }
    `]
})
export class AppComponent { }

O parâmetro styles contém o conjunto de estilos que serão aplicados ao componente:

Ao utilizar estilos, é importante lembrar que eles se aplicam localmente apenas à marcação gerenciada pelo componente. Por exemplo, se houver elementos fora do escopo de controle do componente na página, esses estilos não serão aplicados a eles. Veja este exemplo:

<body>
  <my-app>Loading...</my-app>
  <h2>Subtítulo</h2>
</body>

Se o cabeçalho h2 estivesse dentro do template do componente, o estilo seria aplicado a ele. No entanto, como está fora, ele não será estilizado:

Vale ressaltar que, a partir da versão 17, não é mais obrigatório colocar os estilos dentro de um array, como no exemplo anterior:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    template: `<h1>Hello Angular</h1>
                <p>O aplicativo Angular é composto por componentes</p>`,
    styles: ` 
        h1, h2 { color: red; }
        p { font-size: 13px; font-family: Verdana; }
    `
})
export class AppComponent { }

O Seletor :host

O seletor :host refere-se ao elemento onde o componente está hospedado. Neste caso, é o elemento <my-app></my-app>. O seletor :host permite aplicar estilos diretamente a esse elemento:

styles: [` 
h1, h2 {
  color:red;
}
p {
  font-size:13px;
}
:host {
    font-family: Verdana;
    color: #555;
}`]

Conectando Arquivos Externos

Se houver muitos estilos, o código do componente pode se tornar excessivamente longo. Nesse caso, é recomendável mover os estilos para um arquivo CSS separado. Por exemplo, crie um novo arquivo app.component.css na mesma pasta do componente com o seguinte conteúdo:

h1, h2 { color: red; }
p { font-size: 13px; }
:host {
    font-family: Verdana;
    color: #555;
}

Em seguida, altere o código do componente para:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    template: `<h1>Hello Angular</h1>
                <p>O aplicativo Angular é composto por componentes</p>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {}

O parâmetro styleUrls permite especificar um ou mais arquivos CSS que serão aplicados para estilização. Neste caso, presume-se que o arquivo CSS esteja localizado na pasta app do projeto:

helloapp/
|-- src/
|   |-- app/
|   |   |-- app.component.css
|   |   |-- app.component.ts
|   |-- index.html
|   |-- main.ts
|   
|-- angular.json
|-- package.json
|-- tsconfig.json

De maneira semelhante, podemos mover o template para um arquivo HTML separado. Crie um novo arquivo app.component.html na pasta app com o seguinte código:

<h1>Hello Angular</h1>
<p>O aplicativo Angular é composto por componentes</p>

Todo o código que estava anteriormente no template do componente agora está neste arquivo HTML. Agora, modifique o próprio componente:

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    standalone: true,
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

Dessa forma, ao mover o código CSS e HTML para arquivos separados, o código do próprio componente se torna mais limpo e simples.