Arquivo com a classe do componente em Angular

A parte principal de qualquer componente é seu funcionalidade, ou seja, propriamente seu programa. No Angular, a funcionalidade do componente é escrita na linguagem TypeScript e representa uma classe de POO.

Em cada componente, esta classe está localizada em um arquivo com a extensão .ts. No nosso componente principal, este será o arquivo app.component.ts.

Vamos familiarizar-nos com o conteúdo deste arquivo. Para começar, preste atenção na classe do nosso componente:

export class AppComponent {
	title: string = 'test';
}

A esta classe é aplicado o decorador @Component. Este decorador recebe como parâmetro um objeto que configura nosso componente:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

Na propriedade templateUrl é definido o caminho para o arquivo que contém a marcação (HTML) do nosso componente.

Na propriedade styleUrls é definido o array de caminhos para os arquivos CSS que estilizam a marcação do nosso componente. Como você pode ver, o arquivo de estilos pode não ser apenas um.

Na propriedade selector é definido o seletor da tag HTML na qual será exibido (montado) o código HTML do nosso componente. No nosso caso, vemos o nome app-root. A este nome corresponde uma tag com o mesmo nome. Esta tag está escrita no arquivo de layout src/index.html. No local onde esta tag está escrita, é onde a marcação do nosso componente será inserida.

Na propriedade imports estão indicados os módulos que são importados para o nosso componente.

Na propriedade standalone sempre será indicado o valor true. Atualmente, isso é mais uma questão técnica do Angular, portanto por enquanto não se preocupe em entendê-la profundamente.

Abra o arquivo app.component.ts e estude-o.

Crie vários arquivos de estilo e conecte-os no decorador.