Diretivas em Angular

Em Angular, uma diretiva é uma classe que adiciona comportamento a um elemento do DOM, permitindo modificar o seu comportamento ou aparência. Existem dois tipos de diretivas em Angular: diretivas estruturais e diretivas de atributo.

As diretivas estruturais são responsáveis por modificar a estrutura do DOM, adicionando ou removendo elementos. As diretivas de atributo, por sua vez, são responsáveis por modificar a aparência ou comportamento de um elemento.

Para usar diretivas em um módulo Angular, primeiro é preciso definir a diretiva em seu próprio arquivo TypeScript. Por exemplo, considere a seguinte diretiva de atributo simples que altera a cor de fundo de um elemento do DOM:

    import { Directive, ElementRef } from '@angular/core';

    @Directive({
    selector: '[appFundoVerde]'
    })
    export class FundoVerdeDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'green';
    }
    }

Nesse exemplo, estamos definindo uma diretiva chamada FundoVerdeDirective que adiciona a cor verde ao fundo do elemento em que ela é aplicada. A diretiva é definida com o seletor [appFundoVerde], o que significa que ela pode ser usada em elementos do DOM com o atributo appFundoVerde.

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

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FundoVerdeDirective } from './fundo-verde.directive';

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

Nesse exemplo, estamos definindo um módulo chamado AppModule que declara a diretiva FundoVerdeDirective. A diretiva é importada do arquivo fundo-verde.directive.ts e adicionada à seção declarations do módulo. O módulo também importa o módulo BrowserModule.