Angular 2 - Transforming Data

Angular 2 has a lot of filters and pipes that can be used to transform data.

lowercase

This is used to convert the input to all lowercase.

Syntax

Propertyvalue | lowercase 

Parameters

None

Result

The property value will be converted to lowercase.

Example

First ensure the following code is present in the app.component.ts file.

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"]; 
}

Next, ensure the following code is present in the app/app.component.html file.

<span> 
   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> 
</span> 

Output

Once you save all the code changes and refresh the browser, you will get the following output.

uppercase

This is used to convert the input to all uppercase.

Syntax

Propertyvalue | uppercase 

Parameters

None.

Result

The property value will be converted to uppercase.

Example

First ensure the following code is present in the app.component.ts file.

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"]; 
} 

Next, ensure the following code is present in the app/app.component.html file.

<span> 
   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> 
</span>

Output

Once you save all the code changes and refresh the browser, you will get the following output.

spce

This is used to spce a piece of data from the input string.

Syntax

Propertyvalue | spce:start:end 

Parameters

start − This is the starting position from where the spce should start.

end − This is the starting position from where the spce should end.

Result

The property value will be spced based on the start and end positions.

Example

First ensure the following code is present in the app.component.ts file

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"];
}

Next, ensure the following code is present in the app/app.component.html file.

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

Output

Once you save all the code changes and refresh the browser, you will get the following output.

date

This is used to convert the input string to date format.

Syntax

Propertyvalue | date:”dateformat” 

Parameters

dateformat − This is the date format the input string should be converted to.

Result

The property value will be converted to date format.

Example

First ensure the following code is present in the app.component.ts file.

import { 
   Component 
} from  @angular/core ;  

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

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

Next, ensure the following code is present in the app/app.component.html file.

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

Output

Once you save all the code changes and refresh the browser, you will get the following output.

currency

This is used to convert the input string to currency format.

Syntax

Propertyvalue | currency 

Parameters

None.

Result

The property value will be converted to currency format.

Example

First ensure the following code is present in the app.component.ts file.

import { 
   Component 
} from  @angular/core ;  

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

export class AppComponent { 
   newValue: number = 123; 
} 

Next, ensure the following code is present in the app/app.component.html file.

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

Output

Once you save all the code changes and refresh the browser, you will get the following output.

percentage

This is used to convert the input string to percentage format.

Syntax

Propertyvalue | percent 

Parameters

None

Result

The property value will be converted to percentage format.

Example

First ensure the following code is present in the app.component.ts file.

import { 
   Component 
} from  @angular/core ;  

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

export class AppComponent { 
   newValue: number = 30; 
} 

Next, ensure the following code is present in the app/app.component.html file.

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

Output

Once you save all the code changes and refresh the browser, you will get the following output.

There is another variation of the percent pipe as follows.

Syntax

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

Parameters

minIntegerDigits − This is the minimum number of Integer digits.

minFractionDigits − This is the minimum number of fraction digits.

maxFractionDigits − This is the maximum number of fraction digits.

Result

The property value will be converted to percentage format

Example

First ensure the following code is present in the app.component.ts file.

import { 
   Component 
} from  @angular/core ;  

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

export class AppComponent { 
   newValue: number = 0.3; 
}

Next, ensure the following code is present in the app/app.component.html file.

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

Output

Once you save all the code changes and refresh the browser, you will get the following output.