Angular: Pipes = para transformar datos

 ¿Qué son los Pipes?

Los pipes en Angular son utilizados para transformar datos en plantillas. Se utilizan mediante el símbolo "|" y permiten formatear datos como fechas, números, y cadenas, entre otros. Angular proporciona varios pipes integrados como: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, y PercentPipe. (Angular proporciona una tubería (pipes) incorporada: https://angular.dev/guide/pipes#built-in-pipes)

  • DatePipe: Forma un valor de fecha de acuerdo con las reglas locales.
  • {{persona.nacio| date: 'shortDate' }}
  • UpperCasePipe: Transforma el texto a todo el caso superior. 
     {{persona.nombre | uppercase }}
  • LowerCasePipeTransforma el texto a todos los casos inferiores.
  • {{persona.nombre | lowercase }}
  • CurrencyPipe: Transforma un número en una cadena monetaria, formateado de acuerdo con las reglas locales.
  •  {{persona.gana | currency:'USD' }}
  • DecimalPipe: Transforma un número en una cadena con un punto decimal, formateado de acuerdo con las reglas locales. 
    •  {{ 3.6 | number:'1.0-0'}}   <!--will output '4' numero positivo --> 
  {{ -3.6 | number:'1.0-0'}}   <!--will output '-4'  numero negativo -->
  • PercentPipe: Transforma un número en una cadena porcentual, formateado de acuerdo con las reglas locales.
  • AsyncPipe: Suscríbete y se suscribe a una fuente asincrónica como una observable.
  • JsonPipe: Mostrar una propiedad de objetos de componente a la pantalla como JSON para la depuración. 
  • {{persona | json }}

 

Tipos de Pipes proporcionadas por Angular

DatePipe: Formatea una fecha. 

<p>{{ today | date:'shortDate' }}</p>
 * | Option        | Equivalent to                       | Examples (given in `en-US` locale)              |
 * |---------------|-------------------------------------|-------------------------------------------------|
 * | `'short'`     | `'M/d/yy, h:mm a'`                  | `6/15/15, 9:03 AM`                              |
 * | `'medium'`    | `'MMM d, y, h:mm:ss a'`             | `Jun 15, 2015, 9:03:01 AM`                      |
 * | `'long'`      | `'MMMM d, y, h:mm:ss a z'`          | `June 15, 2015 at 9:03:01 AM GMT+1`             |
 * | `'full'`      | `'EEEE, MMMM d, y, h:mm:ss a zzzz'` | `Monday, June 15, 2015 at 9:03:01 AM GMT+01:00` |
 * | `'shortDate'` | `'M/d/yy'`                          | `6/15/15`                                       |
 * | `'mediumDate'`| `'MMM d, y'`                        | `Jun 15, 2015`                                  |
 * | `'longDate'`  | `'MMMM d, y'`                       | `June 15, 2015`                                 |
 * | `'fullDate'`  | `'EEEE, MMMM d, y'`                 | `Monday, June 15, 2015`                         |
 * | `'shortTime'` | `'h:mm a'`                          | `9:03 AM`                                       |
 * | `'mediumTime'`| `'h:mm:ss a'`                       | `9:03:01 AM`                                    |
 * | `'longTime'`  | `'h:mm:ss a z'`                     | `9:03:01 AM GMT+1`                              |
 * | `'fullTime'`  | `'h:mm:ss a zzzz'`                  | `9:03:01 AM GMT+01:00`                          |

 

 

CurrencyPipe: Formatea un número como moneda.

<p>{{ precio | currency:'USD' }}</p>

@param currencyCode The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217)
 * currency code, such as `USD` for the US dollar and `EUR` for the euro.

 ISO 4217 - Wikipedia: https://en.wikipedia.org/wiki/ISO_4217

 

Pipe personalizado: 

 typescript: Copiar código

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

@Pipe({ name: 'customPipe' })
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}
Html
<p>{{ 'hello world' | customPipe }}</p>

 

Video tutoriales: 

  1. Angular (v18) - Pipes https://youtu.be/aCsOSOnvxXo
  2. Curso Angular 2023 #4 Directivas y Pipes En Angular: https://youtu.be/FEPqtxyThU0 
  3. Pipes  en Angular: https://youtu.be/_UPKc89q7iw  
  4.  Pipes y custom pipes en ANGULAR  https://youtu.be/HAYaflTmNLM
  5. PIPE personalizado (parte 1): https://youtu.be/hT8KUBY2BJE
  6. Pipes personalizados (parte 2): https://youtu.be/JQdNiUV1Pbk  
  7. create custom pipe | Angular 18  https://youtu.be/44ImRetg43o

 

// ejemplo2.component.ts
import { CurrencyPipe, DatePipe, JsonPipe, LowerCasePipe, TitleCasePipe, UpperCasePipe, } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-ejemplo2', standalone: true,
  imports: [JsonPipe, UpperCasePipe, LowerCasePipe, TitleCasePipe, DatePipe, CurrencyPipe, ],
  template:` 

  <p> <b>JsonPipe = </b>{{persona | json }} </p>
  <p> <B>UpperCasePipe =</B> {{persona.nombre | uppercase }} {{ persona.apellido | uppercase}} </p>
  <p> <B>LowerCasePipe =</B> {{persona.nombre | lowercase }} {{ persona.apellido | lowercase}} </p>
  <p> <b>DatePipe = </b> {{persona.nacio| date }}, 
  <b>date: 'shortDate'</b> {{persona.nacio| date: 'shortDate' }}</p>
  <p> <b>currency:'USD'</b>  {{persona.gana | currency:'USD' }}</p>
  <p>{{persona.edad | json }}</p>

  `,
  styles:`[]`
})
export class Ejemplo2Component {
  persona = {
    nombre: 'Milton',
    apellido: 'Rodriguez',
    edad: 28,
    nacio: '05-12-1996',
    gana: 300,
    }  // Probar envio por consola
  }

 

 

Ejemplo de formulario: usando JsonPipe, console.log()

 // Modulos necesarios para la app
  //ejemplo2.component.ts
import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-ejemplo2', standalone: true,
  imports: [ FormsModule, JsonPipe ],
  template:` 


<form action=""  #myForm="ngForm" (ngSubmit)="onSubmit(myForm) " >
<input type="text" name="nombre" placeholder="Nombre" ngModel [(ngModel)]="persona.nombre">
<input type="text" name="apellido" placeholder="Apellido" ngModel [(ngModel)]="persona.apellido">
<button type="submit">Guardar</button>
</form>
<p>{{persona | json }}</p>

  `,
  styles:`[]`
})
export class Ejemplo2Component {
  persona = { nombre: '', apellido: '', }  

  onSubmit(form: any) {
  		// Probar envio por consola
       console.log(this.persona);
        // Guardar datos en localStorage
        localStorage.setItem('nombre', form.nombre);
        localStorage.setItem('apellido', form.apellido);
      }
  }

mmmm

 

C:\ANGULAR-v18\Cmder_Consola 
// Creando nuevo proyecto APP= practica2
 ng new practica2
                                    
 cd practica2         // Entrando a la carpeta del proyecto
 
C:\ANGULAR-v18\Cmder_Consola\practica2 (master)                 
 code .  		// Abriendo el proyecto en la visual estudio code
 
// Generando componentes 
ng g c modulo-comun 
// Generando componentes en carpeta Pipes
ng g c modulo-comun/pipes 

// Generando componentes --inline-template --inline-style
ng g c --inline-template --inline-style modulo-comun/pipes/DatePipe

ng g c --inline-template --inline-style modulo-comun/pipes/UpperCasePipe

ng g c --inline-template --inline-style modulo-comun/pipes/LowerCasePipe

ng g c --inline-template --inline-style modulo-comun/pipes/CurrencyPipe

ng g c --inline-template --inline-style modulo-comun/pipes/PercentPipe

ng g c --inline-template --inline-style modulo-comun/pipes/DecimalPipe

ng g c --inline-template --inline-style modulo-comun/pipes/JsonPipe

ng g c --inline-template --inline-style modulo-comun/pipes/AsyncPipe

Estructura de un Proyecto Angular con Directivas y Pipes


practicaPipes/
├── src/
│   ├── app/
│   │   ├── directives/
│   │   │   └── highlight.directive.ts
│   │   ├── pipes/
│   │   │   └── exponential-strength.pipe.ts
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── angular.json
├── package.json
├── tsconfig.json
└── tslint.json

 

Construcción de una APP con Directivas y Pipes

1- Instalar Angular CLI: 

 npm install -g @angular/cli
2- Crear un Nuevo Proyecto:
 ng new practicaPipes
  cd practicaPipes

3- Generar una Directiva:
 ng generate directive directives/highlight

4- Generar un Pipe:
 ng generate pipe pipes/exponentialStrength

5- Agregar Lógica en la Directiva y el Pipe:
Editar highlight.directive.ts como se muestra arriba.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
      this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
      this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'red');
    }
}
Editar exponential-strength.pipe.ts como se muestra arriba. 

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

@Pipe({
  name: 'exponentialStrength',
  standalone: true
})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

6- Actualizar el Módulo Principal:
Asegurarse de que HighlightDirective y ExponentialStrengthPipe estén importados y declarados en app.component.ts. 

import { Component } from '@angular/core';

// Directivas importadas
import { HighlightDirective } from './directives/highlight.directive';
// Pipes importado
import { ExponentialStrengthPipe } from './pipes/exponential-strength.pipe';


@Component({
  selector: 'app-root',
  standalone: true,
  // Declarando modulos importados o Agregados
  imports: [HighlightDirective, ExponentialStrengthPipe, ],
  templateUrl: './prueba-ejemplo.component.html',
  styleUrl: './prueba-ejemplo.component.css'
})
export class AppComponent {

}

7- Actualizar el Componente Principal:
Editar app.component.html para usar la directiva y el pipe como se muestra arriba.



 <h2>Directivas y Pipes</h2>
 
<div>
   
<h4 appHighlight> Directivas Highlight me!</h4>
   
<br>
   
<p>Trabajando con Pipes; The exponent of 3^2 is: {{ 3 | exponentialStrength: '2' }} </p>
 
</div>

 

8- Iniciar la Aplicación: bash

 ng serve

Navegar a http://localhost:4200 para ver la aplicación en funcionamiento.

Librerías Utilizadas
Angular Core: @angular/core para la funcionalidad básica.
Angular Platform Browser: @angular/platform-browser para la integración con el navegador.

....