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

Directivas Incorporadas

Siguiente ►
►

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?

Las directivas son clases que pueden modificar el DOM de una aplicación Angular. Existen tres tipos principales de directivas:

  1. Directivas de Componente: Son directivas con una plantilla asociada.
  2. Directivas Estructurales: Modifican la estructura del DOM, añadiendo o eliminando elementos.
  3. Directivas de Atributo: Modifican el comportamiento o el aspecto de un elemento existente.

Directivas Estructurales Incorporadas

*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>

Explicación:

  • *ngIf="isVisible": Si isVisible es true, el div se renderiza. Si es false, el div no se renderiza.

*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>

Explicación:

  • *ngFor="let item of items": Itera sobre la colección items y renderiza un li para cada item.

*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>

Explicación:

  • [ngSwitch]="color": Evalúa la expresión color.
  • *ngSwitchCase="'red'": Muestra este div si color es 'red'.
  • *ngSwitchDefault: Muestra este div si ninguna de las condiciones anteriores se cumple.

Directivas de Atributo Incorporadas

ngClass

La directiva ngClass se utiliza para añadir o eliminar clases CSS de un elemento dinámicamente.

Ejemplo:

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

Explicación:

  • [ngClass]="{ 'active': isActive, 'disabled': isDisabled }": Añade la clase active si isActive es true y la clase disabled si isDisabled es true.

ngStyle

La directiva ngStyle se utiliza para aplicar estilos CSS a un elemento de manera dinámica.

Ejemplo:

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">Texto estilizado</div>

Explicación:

  • [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }": Aplica el color textColor y el tamaño de fuente fontSize al div.

ngModel

La directiva ngModel se utiliza para enlazar datos bidireccionalmente entre el modelo y la vista.

Ejemplo:

<input [(ngModel)]="username" placeholder="Enter your username">
<p>Username: {{ username }}</p>

Explicación:

  • [(ngModel)]="username": Enlaza el valor del input con la propiedad username del componente. Cualquier cambio en el input se reflejará en username y viceversa.

Ejercicios Prácticos

Ejercicio 1: Uso de *ngIf

Instrucciones:

  1. Crea un componente que tenga una propiedad isLoggedIn.
  2. Usa *ngIf para mostrar un mensaje de bienvenida solo si isLoggedIn es true.

Solución:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggleLogin()">Toggle Login</button>
    <div *ngIf="isLoggedIn">Bienvenido, usuario!</div>
  `
})
export class AppComponent {
  isLoggedIn = false;

  toggleLogin() {
    this.isLoggedIn = !this.isLoggedIn;
  }
}

Ejercicio 2: Uso de *ngFor

Instrucciones:

  1. Crea un componente que tenga una propiedad items que sea una lista de nombres.
  2. Usa *ngFor para mostrar cada nombre en una lista desordenada (ul).

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 = ['Alice', 'Bob', 'Charlie'];
}

Ejercicio 3: Uso de ngClass

Instrucciones:

  1. Crea un componente que tenga una propiedad isActive.
  2. Usa ngClass para añadir una clase active a un div solo si isActive es true.

Solución:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="toggleActive()">Toggle Active</button>
    <div [ngClass]="{ 'active': isActive }">Este div puede ser activo</div>
  `,
  styles: [`
    .active {
      color: green;
      font-weight: bold;
    }
  `]
})
export class AppComponent {
  isActive = false;

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

Conclusión

En esta sección, hemos explorado algunas de las directivas incorporadas más comunes en Angular, incluyendo *ngIf, *ngFor, *ngSwitch, ngClass, ngStyle y ngModel. Estas directivas son herramientas poderosas que te permiten manipular el DOM de manera declarativa y eficiente. Asegúrate de practicar con los ejercicios proporcionados para consolidar tu comprensión de estas directivas. En el próximo tema, exploraremos cómo crear tus propias directivas personalizadas.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

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

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

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