Angular 2 - Dados de transformação

Angular 2 possui muitos filtros e tubos que podem ser usados para transformar dados.

minúsculas

Isso é usado para converter a entrada em todas as letras minúsculas.

Sintaxe

Propertyvalue | lowercase

Parâmetros

Nenhum

Resultado

O valor da propriedade será convertido em minúsculas.

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo 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"]; 
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo 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>

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

maiúsculas

Isso é usado para converter a entrada em todas as letras maiúsculas.

Sintaxe

Propertyvalue | uppercase

Parâmetros

Nenhum.

Resultado

O valor da propriedade será convertido em maiúsculas.

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo 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"]; 
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo 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>

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

fatia

Isso é usado para cortar um pedaço de dados da string de entrada.

Sintaxe

Propertyvalue | slice:start:end

Parâmetros

start - Esta é a posição inicial de onde a fatia deve começar.
end - Esta é a posição inicial de onde a fatia deve terminar.

Resultado

O valor da propriedade será dividido com base nas posições inicial e final.

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo 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"];
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo 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>

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

encontro

Isso é usado para converter a string de entrada para o formato de data.

Sintaxe

Propertyvalue | date:”dateformat”

Parâmetros

dateformat - Este é o formato de data para o qual a string de entrada deve ser convertida.

Resultado

O valor da propriedade será convertido para o formato de data.

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo 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); 
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo app / app.component.html.

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

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

moeda

Isso é usado para converter a string de entrada em formato de moeda.

Sintaxe

Propertyvalue | currency

Parâmetros

Nenhum.

Resultado

O valor da propriedade será convertido para o formato de moeda.

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 123; 
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo app / app.component.html.

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

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

percentagem

Isso é usado para converter a string de entrada em formato de porcentagem.

Sintaxe

Propertyvalue | percent

Parâmetros

Nenhum

Resultado

O valor da propriedade será convertido para o formato de porcentagem.

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 30; 
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo app / app.component.html.

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

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

Há outra variação do tubo percentual como segue.

Sintaxe

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

Parâmetros

minIntegerDigits - Este é o número mínimo de dígitos inteiros.
minFractionDigits - Este é o número mínimo de dígitos fracionários.
maxFractionDigits - Este é o número máximo de dígitos fracionários.

Resultado

O valor da propriedade será convertido para o formato de porcentagem

Exemplo

Primeiro, certifique-se de que o código a seguir esteja presente no arquivo app.component.ts.

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

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

export class AppComponent { 
   newValue: number = 0.3; 
}

Em seguida, certifique-se de que o código a seguir esteja presente no arquivo app / app.component.html.

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

Resultado

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.