Angular 2 - Transformer des données

Angular 2 possède de nombreux filtres et tuyaux qui peuvent être utilisés pour transformer des données.

minuscule

Ceci est utilisé pour convertir l'entrée en minuscules.

Syntaxe

Propertyvalue | lowercase

Paramètres

Aucun

Résultat

La valeur de la propriété sera convertie en minuscules.

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

majuscule

Ceci est utilisé pour convertir l'entrée en majuscules.

Syntaxe

Propertyvalue | uppercase

Paramètres

Aucun.

Résultat

La valeur de la propriété sera convertie en majuscules.

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

tranche

Ceci est utilisé pour découper un morceau de données de la chaîne d'entrée.

Syntaxe

Propertyvalue | slice:start:end

Paramètres

start - Il s'agit de la position de départ à partir de laquelle la tranche doit commencer.
end - Il s'agit de la position de départ à partir de laquelle la tranche doit se terminer.

Résultat

La valeur de la propriété sera découpée en fonction des positions de début et de fin.

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

Date

Ceci est utilisé pour convertir la chaîne d'entrée au format de date.

Syntaxe

Propertyvalue | date:”dateformat”

Paramètres

dateformat - Il s'agit du format de date dans lequel la chaîne d'entrée doit être convertie.

Résultat

La valeur de la propriété sera convertie au format de date.

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15); 
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

devise

Ceci est utilisé pour convertir la chaîne d'entrée au format monétaire.

Syntaxe

Propertyvalue | currency

Paramètres

Aucun.

Résultat

La valeur de la propriété sera convertie au format monétaire.

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

pourcentage

Ceci est utilisé pour convertir la chaîne d'entrée au format de pourcentage.

Syntaxe

Propertyvalue | percent

Paramètres

Aucun

Résultat

La valeur de la propriété sera convertie au format pourcentage.

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

Il existe une autre variation du tuyau de pourcentage comme suit.

Syntaxe

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

Paramètres

minIntegerDigits - C'est le nombre minimum de chiffres entiers.
minFractionDigits - Il s'agit du nombre minimum de chiffres de fraction.
maxFractionDigits - Il s'agit du nombre maximal de chiffres de fraction.

Résultat

La valeur de la propriété sera convertie au format pourcentage

Exemple

Assurez-vous d'abord que le code suivant est présent dans le fichier app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

Ensuite, assurez-vous que le code suivant est présent dans le fichier app / app.component.html.

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

Production

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.