213 shaares
1 résultat
taggé
pipes
Angular propose une petite feature bien pratique pour le format des données affichées à l'écran : la définition des pipes.
On définit un pipe comme ça :
import {DomSanitizer} from '@angular/platform-browser';
import {PipeTransform, Pipe} from "@angular/core";
@Pipe({ name: 'safeHtml'}) <------ C'est avec ce nom que vous appelerez votre pipeTransformer dans les vues
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value: any) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
On déclare ensuite le Pipe dans le NgModule via les déclarations :
import { SafeHtmlPipe } from './pipe/SafeHtmlPipe';
@NgModule({
declarations: [ SafeHtmlPipe ]
})
Et on peut s'en servir dans le modèle :
import { DatePipe } from '@angular/common';
@Component({
...,
providers: [DatePipe]
})
export class MyComponent {
private datePipe: DatePipe;
constructor(datePipe: DatePipe) {
this.datePipe = datePipe;
}
doSomething() {
let filename = 'filename'+this.datePipe.transform(new Date(), 'yyyyMMyy-hhmm')+'.jpg';
}
}
Ou dans les vues :
<label>Date</label>
<label>The hero's birthday is {{ birthday | date }}</label>
Le DatePipe a pour nom "date" : https://github.com/angular/angular/blob/5.2.3/packages/common/src/pipes/date_pipe.ts#L15-L174