El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Directivas Incorporadas

Siguiente ►
►

Introducción

Las directivas en Angular son una de las características más poderosas y flexibles del framework. Permiten modificar el comportamiento del DOM de manera declarativa. En este tema, nos enfocaremos en las directivas incorporadas que Angular proporciona de manera predeterminada.

¿Qué son las Directivas Incorporadas?

Las directivas incorporadas son directivas que vienen predefinidas con Angular y están listas para ser utilizadas en nuestras aplicaciones. Estas directivas nos permiten manipular el DOM de diversas maneras, como mostrar u ocultar elementos, aplicar estilos condicionales, y más.

Tipos de Directivas Incorporadas

Las directivas incorporadas se pueden clasificar en tres categorías principales:

  1. Directivas Estructurales: Cambian la estructura del DOM, añadiendo o eliminando elementos.
  2. Directivas de Atributo: Cambian el aspecto o comportamiento de un elemento existente.
  3. Directivas de Clase: Añaden comportamiento a los elementos.

Directivas Estructurales

*ngIf

La directiva *ngIf se utiliza para añadir o eliminar elementos del DOM basándose en una condición booleana.

Ejemplo:

<div *ngIf="isVisible">Este texto solo se muestra si isVisible es verdadero.</div>

En este ejemplo, el div solo se renderiza si la variable isVisible es true.

*ngFor

La directiva *ngFor se utiliza para iterar sobre una colección y renderizar un elemento para cada ítem de la colección.

Ejemplo:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

En este ejemplo, se renderiza un li por cada elemento en la colección items.

*ngSwitch

La directiva *ngSwitch se utiliza para mostrar uno de varios elementos basándose en una expresión.

Ejemplo:

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Color es rojo</div>
  <div *ngSwitchCase="'blue'">Color es azul</div>
  <div *ngSwitchDefault>Color no es ni rojo ni azul</div>
</div>

En este ejemplo, se muestra el div correspondiente al valor de la variable color.

Directivas de Atributo

ngClass

La directiva ngClass se utiliza para añadir o eliminar clases CSS de un elemento de manera condicional.

Ejemplo:

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Contenido</div>

En este ejemplo, la clase active se añade si isActive es true, y la clase disabled se añade si isDisabled es true.

ngStyle

La directiva ngStyle se utiliza para aplicar estilos CSS de manera condicional.

Ejemplo:

<div [ngStyle]="{'color': isRed ? 'red' : 'blue'}">Texto con estilo condicional</div>

En este ejemplo, el color del texto será rojo si isRed es true, de lo contrario será azul.

Directivas de Clase

Las directivas de clase son aquellas que añaden comportamiento a los elementos. Aunque Angular no proporciona muchas directivas de clase incorporadas, puedes crear tus propias directivas personalizadas para añadir comportamiento específico.

Ejercicios Prácticos

Ejercicio 1: Uso de *ngIf

Instrucciones:

  1. Crea un componente que tenga una variable booleana isVisible.
  2. Usa la directiva *ngIf para mostrar un mensaje solo si isVisible es true.
  3. Añade un botón que cambie el valor de isVisible al hacer clic.

Solución:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggleVisibility()">Toggle Visibility</button>
    <div *ngIf="isVisible">Este texto es visible</div>
  `
})
export class AppComponent {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

Ejercicio 2: Uso de *ngFor

Instrucciones:

  1. Crea un componente que tenga una lista de elementos.
  2. Usa la directiva *ngFor para renderizar cada elemento de la lista en un li.

Solución:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `
})
export class AppComponent {
  items = ['Elemento 1', 'Elemento 2', 'Elemento 3'];
}

Conclusión

Las directivas incorporadas en Angular son herramientas poderosas que nos permiten manipular el DOM de manera declarativa y eficiente. En esta sección, hemos cubierto las directivas estructurales y de atributo más comunes, y hemos visto cómo se pueden utilizar en ejemplos prácticos. Con esta base, estarás preparado para explorar directivas más avanzadas y personalizadas en Angular.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados