Saltar al contenido principal

Pipes - Vista General

Paquete: @tiendana/ngx-core/pipes

Transformaciones de datos para templates de Angular.

Pipes Disponibles​

dateImplictTz​

Formatea fechas asegurando que se interpreten en UTC cuando no tienen zona horaria explícita. Convierte automáticamente timestamps Unix (segundos) multiplicándolos por 1000.

{{ dateString | dateImplictTz:'dd/MM/yyyy HH:mm' }}
{{ timestamp | dateImplictTz:'medium' }}

highlightedText​

Resalta términos de búsqueda en texto envolviéndolos con <span class="highlighted-text">. Soporta normalización de acentos y mínimo de caracteres.

<p [innerHTML]="text | highlightedText:search():true:3"></p>

Demos interactivos: 4 ejemplos (básico, normalización, mínimo caracteres, lista)

searchList​

Filtra arrays de objetos buscando un término en todas sus propiedades de tipo string, number o boolean.

@for (item of items | searchList:searchTerm(); track item.id) {
  <li>{{ item.name }}</li>
}

Demos interactivos: 3 ejemplos (básico, múltiples campos, tabla)

addUtm​

Agrega parámetros UTM a URLs para tracking de campañas. Usa source: 'webapp' y campaign: 'organic' por defecto.

<a [href]="url | addUtm:{ medium: 'email' }">Link</a>

Demos interactivos: 2 ejemplos (básico, lista de productos)

abstract2Fa​

Convierte AbstractControl a FormArray con type safety en templates.

@for (control of (form.controls.items | abstract2Fa).controls; track $index) {
  <input [formControl]="control" />
}

abstract2Fg​

Convierte AbstractControl a FormGroup con type safety en templates.

<div [formGroup]="form.controls.address | abstract2Fg">
  <input formControlName="street" />
</div>

Instalación​

npm install @tiendana/ngx-core

Clases exportadas​

Cada pipe es standalone y se importa desde @tiendana/ngx-core/pipes:

PipeClase
dateImplictTzDateImplictTZPipe
highlightedTextHighlightedTextPipe
searchListSearchListPipe
addUtmAddUtmPipe
abstract2FaAbstract2FaPipe
abstract2FgAbstract2FgPipe

Importación​

import { Component, signal } from '@angular/core';
import { DateImplictTZPipe, SearchListPipe } from '@tiendana/ngx-core/pipes';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [DateImplictTZPipe, SearchListPipe],
  template: `
    <p>{{ date | dateImplictTz:'dd/MM/yyyy' }}</p>
    @for (item of items | searchList:searchTerm(); track item.id) {
      <div>{{ item.name }}</div>
    }
  `
})
export class MyComponent {
  date = new Date();
  items = [/* ... */];
  searchTerm = signal('');
}
Otros pipes y componentes

safeHtml no está en este entry point: vive en @tiendana/ngx-core/ui junto al resto de componentes y directivas. Consulta safeHtml y la vista general de UI, que enlaza también tdn-tabs, tdn-status, tdn-timeline, tdn-stepper y el logomark.

Explorar Pipes​