Componentes em módulos

Em Angular, um componente é uma unidade básica de interface do usuário que pode ser reutilizada em toda a aplicação. Um componente em Angular é composto por três partes principais: uma classe TypeScript que define a lógica do componente, um arquivo HTML que define a estrutura do componente e um arquivo CSS que define o estilo do componente.

Para usar um componente em um módulo, primeiro é preciso definir o componente em seu próprio arquivo TypeScript, HTML e CSS. Por exemplo, considere o seguinte componente simples que exibe um texto:

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

    @Component({
        selector: 'app-texto',
        template: '<p>{{texto}}</p>',
        styles: ['p { color: red; }']
    })
    export class TextoComponent {
        texto = 'Olá, mundo!';
    }

Nesse exemplo, estamos definindo um componente chamado TextoComponent que exibe um parágrafo HTML com o texto "Olá, mundo!" em vermelho. O seletor do componente é app-texto, o que significa que ele pode ser usado em outros arquivos HTML com a tag <app-texto></app-texto>.

Para usar esse componente em um módulo Angular, basta importá-lo no arquivo do módulo e declará-lo na seção declarations do módulo. Por exemplo:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { TextoComponent } from './texto.component';

    @NgModule({
        declarations: [TextoComponent],
        imports: [BrowserModule],
        bootstrap: [TextoComponent]
    })
    export class AppModule { }

Nesse exemplo, estamos definindo um módulo chamado AppModule que declara o componente TextoComponent. O componente é importado do arquivo texto.component.ts e adicionado à seção declarations do módulo. O módulo também importa o módulo BrowserModule e define o componente como o componente de inicialização da aplicação através da propriedade bootstrap.