ANG_FRONT

Práctica 3.2. Creación de Pipes personalizados en Angular

Objetivos

• Crear y utlizar Pipes personalizados en Angular.
• Aprender a transformar datos en tu aplicación de manera eficiente.

Duración aproximada

• 30 minutos.

Instrucciones

Tipos de Data Binding

1. Interpolación:

   • Utilizar la sintaxis de doble llaves para mostrar datos del componente en la vista.

<h1></h1>

1. Property Binding:

• Permite enlazar propiedades del componente a atributos de elementos HTML utilizando corchetes [ ].

<img [src]="urlImagen" [alt]="descripcion">

1. Event Binding:

• Escuchar eventos del DOM y llamar a métodos en el componente utilizando paréntesis ( ).

<button (click)="accion()">Click me</button>

1. Two-Way Data Binding:

• Sincronizar datos de manera bidireccional entre el componente y la vista, usando ngModel.
• Requiere importar FormsModule.

<input [(ngModel)]="nombre">

Atributos, Clases y Estilos Binding en Angular

1. Atributo Binding
   • El Atributo Binding permite enlazar propiedades de HTML a las propiedades del componente utilizando corchetes [ ]. Esto es útil para establecer atributos que pueden cambiar dinámicamente.

<img [src]="imagenUrl" [alt]="descripcion">

• En este caso, imagenUrl y descripcion son propiedades del componente que definen la URL y la descripción de la imagen.

1. Clases Binding
   • El Clases Binding se utiliza para agregar o quitar clases CSS de un elemento de manera dinámica. Usar la directiva ngClass para enlazar clases a condiciones en el componente.

<div [ngClass]="{'activo': isActivo, 'inactivo': !isActivo}">Contenido</div>

• Aquí, la clase activo se aplica si isActivo es verdadero, e inactivo si es falso.

1. Estilos Binding
   • El Estilos Binding permite aplicar estilos CSS directamente a un elemento HTML usando la directiva ngStyle. Esto es útil para cambiar estilos basados en condiciones.

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

• En este caso, color y tamaño son propiedades del componente que determinan el color de fondo y el tamaño de fuente del elemento.

Pipes en Angular

1. Transformación de Datos:

• Los Pipes permiten aplicar transformaciones a datos en tiempo real, mejorando la presentación de la información.

1. Pipes Integrados:

• Angular ofrece varios Pipes incorporados, como:
  • DatePipe: para formatear fechas.
  • CurrencyPipe: para mostrar valores monetarios.
  • DecimalPipe: para formatear números.

1. Pipes Personalizados:

• Puedes crear tus propios Pipes personalizados para realizar transformaciones específicas que no están cubiertas por los Pipes integrados.

1. Uso en Plantillas:

• Los Pipes se aplican utilizando la sintaxis en las plantillas HTML.

Ejemplo de Uso de Pipes

1. Uso de un Pipe Integrado:

<p>Fecha: </p>

1. Creación de un Pipe personalizado: Para crear un Pipe que invierte una cadena de texto, seguir estos pasos:

• Generar el Pipe:

ng generate pipe invertirTexto

• Implementar el Pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'invertirTexto'
})
export class InvertirTextoPipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

• Usar el Pipe en una plantilla:

<p>Angular</p> <!-- Salida: "ralugnA" -->

Pasos para crear un Pipe personalizado

1. Generar el Pipe: Usar Angular CLI para generar un nuevo Pipe:

ng generate pipe nombre-del-pipe

1. Implementar el Pipe: Editar el archivo del Pipe generado (por ejemplo, nombre-del-pipe.pipe.ts) para implementar la lógica de transformación:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'nombreDelPipe'
})
export class NombreDelPipe implements PipeTransform {
  transform(value: string, ...args: any[]): string {
    // Lógica de transformación
    return value.toUpperCase(); // Ejemplo: convertir a mayúsculas
  }
}

1. Usar el Pipe en el Template: Una vez creado, puedes usar el Pipe en las plantillas de Angular:

<p></p>

1. Registrar el Pipe: Asegurarse de que el Pipe esté declarado en el módulo correspondiente (por ejemplo, app.module.ts):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NombreDelPipe } from './nombre-del-pipe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    NombreDelPipe
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ejemplo de un Pipe personalizado

• Supongamos que quieres crear un Pipe que invierte una cadena de texto:

1. Implementación del Pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'invertirTexto'
})
export class InvertirTextoPipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

1. Uso en el Template:

<p>Angular</p> <!-- Salida: "ralugnA" -->

Angular Router

Características Clave

1. Routing:

• Permite definir rutas en la aplicación, mapeando URLs a componentes específicos.
• Se configura en el módulo de enrutamiento.

1. outerModule:

• El módulo RouterModule es el núcleo del sistema de enrutamiento. Se debe importar en el módulo principal de la aplicación.
• Se utiliza para definir las rutas mediante RouterModule.forRoot(routes).

1. Rutas Hijas:

• Permiten crear jerarquías de rutas, donde una ruta puede tener subrutas, lo que ayuda a estructurar la aplicación de manera más modular.

1. Navegación:

• Proporciona métodos para navegar programáticamente entre rutas, como this.router.navigate([‘ruta’]).

1. Guards:

• Los guards permiten proteger rutas, impidiendo el acceso a ciertas partes de la aplicación según condiciones específicas (como autenticación).

1. Lazy Loading:

• Permite cargar módulos solo cuando son necesarios, mejorando el rendimiento al reducir el tamaño del bundle inicial.

Ejemplo de Configuración de Angular Router

1. Instalar el Router: Asegurarse de que el proyecto tenga Angular Router:

ng add @angular/router

1. Definir Rutas: Crear un archivo de enrutamiento (por ejemplo, app-routing.module.ts):

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

1. Usar el Router Outlet: Añadir en tu plantilla principal (por ejemplo, app.component.html) donde se cargarán los componentes de las rutas:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

1. Navegación: Navegar entre las rutas usando los enlaces definidos:

<a routerLink="/about">Ir a About</a>