angular

Pipes en Angular

Dentro del framework de Angular encontraremos un listado de pipes por defecto que podremos utilizar convenientemente durante el proceso de desarrollo de nuestros proyecto. En este artículo mencionare algunos de ellos y ejemplos de uso de los mismos.

UpperCasePipe

Transforma el texto en mayúscula.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  str = "texTO pArA TransFOrMaR"
}
<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Pipes en Angular
  </h1>
</div>
<p>Transformar texto en mayúscula: {{ str | uppercase }}</p>

LowerCasePipe

Transforma el texto en minúscula.

<p>Transformar texto en minúscula: {{ str | lowercase }}</p>

TitleCasePipe

Capitaliza o coloca en mayúscula la primera letra de cada palabra, el resto lo transforma en minúscula.

<p>Capitalizar texto: {{ str | titlecase }}</p>

SlicePipe

Crea un nuevo array o string que contiene un subconjunto de los elementos. Enviamos como parámetro inicial la posición desde donde se crearía el subconjunto y como parámetro opcional podemos enviar la posición final.

<p>Sub String generado desde la posición 6: {{ str | slice: 6 }}</p>
<p>Sub String generado desde la posición 6 hasta la 10: {{ str | slice: 6:10 }}</p>

DatePipe

Formatea el valor de una fecha, tomando como parámetros el formato y como parámetros opcionales la zona horaria y el código de configuración regional.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  fecha = Date.now()
}
<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Pipes en Angular
  </h1>
</div>
<p>Fecha corta: {{ fecha | date: 'shortDate' }}</p>
<p>Fecha media: {{ fecha | date: 'mediumDate' }}</p>
<p>Fecha larga: {{ fecha | date: 'longDate' }}</p>
<p>Fecha completa: {{ fecha | date: 'fullDate' }}</p>

Otros formatos predefinidos:

  • ‘short’: equivalente a ‘M/d/yy, h:mm a’ (6/15/15, 9:03 AM).
  • ‘medium’: equivalene a ‘MMM d, y, h:mm:ss a’ (Jun 15, 2015, 9:03:01 AM).
  • ‘long’: equivalente a ‘MMMM d, y, h:mm:ss a z’ (June 15, 2015 at 9:03:01 AM GMT+1).
  • ‘full’: equivalente a ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
  • ‘shortDate’: equivalente a ‘M/d/yy’ (6/15/15).
  • ‘mediumDate’: equivalente a ‘MMM d, y’ (Jun 15, 2015).
  • ‘longDate’: equivalente a ‘MMMM d, y’ (June 15, 2015).
  • ‘fullDate’: equivalente a ‘EEEE, MMMM d, y’ (Monday, June 15, 2015).
  • ‘shortTime’: equivalente a ‘h:mm a’ (9:03 AM).
  • ‘mediumTime’: equivalente a ‘h:mm:ss a’ (9:03:01 AM).
  • ‘longTime’: equivalente a ‘h:mm:ss a z’ (9:03:01 AM GMT+1).
  • ‘fullTime’: equivalente a ‘h:mm:ss a zzzz’ (9:03:01 AM GMT+01:00).

Más info acerca de DatePipe

Puedes encontrar el código fuente de estos ejemplos en este repositorio de github.

Compartir:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *