“ Integrando Inteligência Artificial com Diretivas Personalizadas no Angular "

Diretivas no Angular são funcionalidade poderosas que permitem adicionar comportamento dinâmico aos elementos no DOM (Document Object Model). Por serem marcadores o Angular pode acompanhar e manipulá-los.

Diretivas de Atributo:

Diretivas Estruturais

Diretivas de Componentes

Diretiva Customizada

Diretivas de Atributo: Alteram comportamentos ou aparência de um elemento, componente ou outra diretiva.

Ex: <div[ngClass]="{´active´:isActive}">Conteúdo</div>

Diretivas Estruturais: Alteram a estrutura do DOM, adicionando ou removento elementos do DOM. Exemplos comum incluem nglf, ngFor e ngSwitch.

nglf é usado para adicionar ou remento elementos no DOM com base em uma condição.

<div *nglf="isVisible"> Este elemento será exibido apenas se 'isVisible' for verdadeiro </div>

ngFor é usado para renderizar um conjunto de elementos para cada item de uma lista.

<ul>

<li *ngFor="let item of items">

{{item}}

</li>

</ul>

ngSwitch é usado para alterar entre várias visualizações com base em uma expressão.

<div [ngSwitch]="viewMode">

<div *ngSwitchClase="mapa">Exibindo Mapa</div>

<div *ngSwitchCase="lista">Exibindo Lista</div>

<div *ngSwitchDefault>Modo Padrão</div>

Diretivas de Componentes: Estas são basicamente componentes Angular pois encapsulam um comportamento específico e uma interface de usuário associada. Componente são um tipo especial de diretivas que possuem templates.

<app-meu-componente></app-meu-componente>

Diretiva Customizada: é uma diretiva definida pelo desenvolvedor para estender o comportamento de elementos HTML de acordo com a necessidade específica da aplicação.

Adicionar funcionalidade personalisada: comportamento específico que não é coberto pelas diretivas atribuidas.

Reutilização do código: Encapsular lógica de apresentação que pode ser aplicada em diferentes partes de aplicação.

Interação diretiva com o DOM: Manipular elementos de forma progromática, oferecendo maior controle sobre a interface.

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

@Directive({

selector: '[highlight]'

})

export class HighlightDirective {

constructor(el: ElementRef, renderer: Renderer2){

rendere.setStyle(el.nativeElement, 'backgroundColor', 'yellow')

}

}

Ferramentas de produção:

Imagens geradas por: Copilot IA

Editor de imagem: Power Point

Conteúdo gerado por: ChatGPT 

Revisão Humana: Denise Almeida