Estilos e Templates de Componentes em 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:

Estilos de Componentes em Angular

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:

Escopo de Estilos em Angular

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.