menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular:Pipes

folder Projet: angularApp
Pipe est une classe qui permet de transformer une valeur input afin de l'afficher ,date,string currency...
Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

Date Pipe

permet la conversion da la date vers plusieur type d'affichage

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  now = Date.now();
    datenum = 15784965451;
    strDate = 'Mon Nov 07 2016 09:44:12 GMT+0530';
   
}

app.component.html

<div style="padding:10px;border:1px solid #ddd;margin:10px;">
  {{now | date :'fullDate'}}
  <br/>
  {{datenum | date :'short'}}
  <br/>
 
  {{strDate | date :'mediumTime'}}
  <br/>
  {{strDate | date :'dd:MMM:yyyy hh-mm-ss z'}}
  </div>

Résultats

Saturday, March 26, 2022
7/2/70, 4:42 PM
4:14:12 AM
07:Nov:2016 04-14-12 GMT+0

UpperCase Pipe , LowerCase

permet de convertir une chaine en majuscule ou on minuscule
{{message | uppercase}}
{{message | lowercase}}

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  texte: string = 'Default value';
   
}

app.component.html

<div style="padding:10px;border:1px solid #ddd;margin:10px;">
  <input type="text" [(ngModel)]="texte">
  <br/>
    {{texte | lowercase}}
  <br/>
    {{texte | uppercase}}
 
  </div>

Decimal,Percent,Currency

Decimal Pipe
{{12.75| number:'6.2-5'}}
6:nombre chiffres minimum avant la virgule
2:nombre chiffres minimum aprés la virgule
5:nombre chiffres minimum aprés la virgule
==>000012.75
Percent Pipe
{{45.521| percent:'2.3-4'}}
2:nombre chiffres minimum avant la virgule
3:nombre chiffres minimum après la virgule
4:nombre chiffres minimum après la virgule

Percent Pipe
{{1457| currency:'USD':true:'2.2-4'}}

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
a: number = 75.0215752;
b: number = 0.4751;
c: number = 175.47215;
}

app.component.html

<div style="padding:10px;border:1px solid #ddd;margin:10px;">
<b>Decimal Pipe:a=75.0215752</b><br/>
{{a | number}} <br/>
{{a | number:'3.4-6'}} <br/>
<b>Percent Pipe:b=0.4751</b><br/>
{{b | percent}} <br/>
{{b | percent:'3.3-5'}} <br/>
<b>Currecy Pipe:c=175.47215</b><br/>
{{c | currency:'MAD':true}} <br/>
{{c | currency:'USD':true}} <br/>
{{c | currency:'USD':false}} <br/>
{{c | currency:'USD':true:'3.3-4'}}<br/>
</div>