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]' }) |
|
Directivas Estructurales | *ngIf, *ngFor, *ngSwitch |
|
Directivas de Componente | @Component({ ... }) |
|
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>