5.Directivas

Objetivo

Aprender a utilizar directivas en Angular para manipular el DOM de manera eficiente.

Ejemplo de Directiva Estructural

Estructura *ngIf:

    *ngIf="message": Esta directiva evalúa la expresión message.
- Si message es verdadero (o tiene un valor no nulo), Angular incluirá el elemento <div> y su contenido en el DOM.
- Si message es falso (o nulo), Angular eliminará el elemento <div> y su contenido del DOM.

Abre src/app/my-component/my-component.component.html y agrega el siguiente contenido:

<!-- Directiva estructural *ngIf: Esta directiva se utiliza para añadir o eliminar elementos del DOM basándose en una condición booleana -->
<div *ngIf="message">
  <!-- La siguiente línea de código se ejecuta solo si 'message' es verdadero o tiene un valor -->
  <!-- Interpolación: El valor de 'message' se inserta dentro del elemento <p> -->
  <p>{{ message }}</p>
</div>

Ejemplo de Directiva Atributo

Abre src/app/my-component/my-component.component.html y agrega el siguiente contenido:

<p [ngStyle]="{ 'color'.'blue' }">Este texto es azul</p>

Conceptos Básicos

Las directivas en Angular permiten manipular el DOM de manera eficiente. Las directivas estructurales (como *ngIf y *ngFor) cambian la estructura del DOM, mientras que las directivas atributo (como [ngStyle] y [ngClass]) cambian la apariencia o el comportamiento de un elemento.

Ejercicio

Utiliza directivas estructurales y de atributo en tu proyecto Angular para manipular el DOM de manera eficiente. Verifica que los cambios se reflejen correctamente en el navegador.



Resumen Directivas


Resumen

Las directivas en Angular son clases que pueden modificar el comportamiento o el aspecto del DOM. Existen tres tipos principales de directivas:

  • Directivas de Atributo: Modifican el comportamiento o el estilo de un elemento existente.
  • Directivas Estructurales: Modifican la estructura del DOM añadiendo o eliminando elementos.
  • Directivas de Componente: Son directivas con una plantilla asociada, básicamente los componentes de Angular.

Tabla de Directivas en Angular

Tipo Sintaxis Básica Ejemplo
Directivas de Atributo @Directive({ selector: '[miDirectiva]' })
import { Directive, ElementRef, Renderer2 } from '@angular/core';
  
  @Directive({
    selector: '[miDirectiva]'
  })
  export class MiDirectiva {
    constructor(el: ElementRef, renderer: Renderer2) {
      renderer.setStyle(el.nativeElement, 'color', 'blue');
    }
  }
<p miDirectiva>Este texto será azul.</p>
Directivas Estructurales *ngIf, *ngFor, *ngSwitch
<p *ngIf="mostrar">Este texto solo se muestra si 'mostrar' es verdadero.</p>
Directivas de Componente @Component({ ... })
import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-mi-componente',
    templateUrl: './mi-componente.component.html',
    styleUrls: ['./mi-componente.component.css']
  })
  export class MiComponente {
    message: string = 'Hola, Mundo!';
  }
<app-mi-componente></app-mi-componente>

Directivas de Atributo

Las directivas de atributo cambian el comportamiento o el estilo de un elemento existente.

Sintaxis Básica:

import { Directive, ElementRef, Renderer2 } from '@angular/core';
  
  @Directive({
    selector: '[miDirectiva]'
  })
  export class MiDirectiva {
    constructor(el: ElementRef, renderer: Renderer2) {
      renderer.setStyle(el.nativeElement, 'color', 'blue');
    }
  }

Ejemplo:

<p miDirectiva>Este texto será azul.</p>

Directivas Estructurales

Las directivas estructurales cambian la estructura del DOM, añadiendo o eliminando elementos.

Sintaxis Básica:

<p *ngIf="mostrar">Este texto solo se muestra si 'mostrar' es verdadero.</p>

Directivas de Componente

Las directivas de componente son directivas con una plantilla asociada, es decir, son componentes.

Sintaxis Básica:

import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-mi-componente',
    templateUrl: './mi-componente.component.html',
    styleUrls: ['./mi-componente.component.css']
  })
  export class MiComponente {
    message: string = 'Hola, Mundo!';
  }

Ejemplo:

<app-mi-componente></app-mi-componente>