Angular - ziua 7 - Pipes

Pipes

- transforma output

- lista de pipe-uri oferite de Angular se poate consulta aici

// Html: 

<p> {{ username | uppercase }} </p>

// alte exemple de pipes: lowercase, dateTime, date, etc.

<p> {{ user.date | date:'fullDate' }} </p>

Pipe-uri inlantuite:

<p> {{ user.date | date:'fullDate' | uppercase }} </p>

Pipe-uri personalizate:

@Pipe({

  name: 'shorten'

})

export class ShortenPipe implements PipeTransform {

  transform(value: any) {

    return value.substr(0, 10) + '...';

  }

}

// se adauga in app.module.ts -> declarations

// Html:

<p> {{ name | shorten  }} </p>

Parametrizare:

@Pipe({

  name: 'shorten'

})

export class ShortenPipe implements PipeTransform {

  transform(value: any, limit: number) { // se pot adauga mai multe filtre, ca parametri

    if (value.length > limit) {

      return value.substr(0, limit) + '...';

    }

    return value;

  }

}

// Html:

<p> {{ name | shorten:5  }} </p>

Generare sablon pentru un pipe personalizat:

> ng generate pipe

!!! Filtrul, odata aplicat, nu este rulat din nou daca se schimba datele (Array sau Object), din motive de performanta. 

Pentru a forta sa se aplica filtrul, se adauga:

@Pipe({

  name: 'shorten',

  pure: false

})

Pipe asincron

appStatus = new Promise((resolve, reject) => {

  setTimeout(() => {

    resolve('stable');

  } , 2000);

});

// Html

<h2> {{ appStatus }} </h2> // va afisa [object Object], nu se uita daca obiectul se transforma dupa 2 sec

Pentru update dupa 2 secunde (merge si pentru Observables):

<h2> {{ appStatus | async }} </h2>