Angular 2 - Transforming Data

Angular 2 has a lot of filters and pipes that can be used to transform data.
This is used to convert the input to all lowercase.
Propertyvalue | lowercase 

None
The property value will be converted to lowercase.
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.
<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> 
Once you save all the code changes and refresh the browser, you will get the following output.
This is used to convert the input to all uppercase.
Propertyvalue | uppercase 

None.
The property value will be converted to uppercase.
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.
<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>
Once you save all the code changes and refresh the browser, you will get the following output.
This is used to slice a piece of data from the input string.
Propertyvalue | slice:start:end 

start − This is the starting position from where the slice should start.
start − This is the starting position from where the slice should start.
end − This is the starting position from where the slice should end.
end − This is the starting position from where the slice should end.
The property value will be sliced based on the start and end positions.
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.
<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> 
Once you save all the code changes and refresh the browser, you will get the following output.
This is used to convert the input string to date format.
Propertyvalue | date:”dateformat” 

dateformat − This is the date format the input string should be converted to.
The property value will be converted to date format.
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.
<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>
Once you save all the code changes and refresh the browser, you will get the following output.
This is used to convert the input string to currency format.
Propertyvalue | currency 

None.
The property value will be converted to currency format.
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.
<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>
Once you save all the code changes and refresh the browser, you will get the following output.
This is used to convert the input string to percentage format.
Propertyvalue | percent 

None
The property value will be converted to percentage format.
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.
<div>
   The percentage is {{newValue | percent}}<br> 
</div>
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.
Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

minIntegerDigits − This is the minimum number of Integer digits.
minIntegerDigits − This is the minimum number of Integer digits.
minFractionDigits − This is the minimum number of fraction digits.
minFractionDigits − This is the minimum number of fraction digits.
maxFractionDigits − This is the maximum number of fraction digits.
maxFractionDigits − This is the maximum number of fraction digits.
The property value will be converted to percentage format
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.
<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div> 
Once you save all the code changes and refresh the browser, you will get the following output.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page