Home  >  Angular

Angular 2 UpperCase Pipe and LowerCase Pipe Example

By Arvind Rai, December 16, 2016
On this page we will provide angular 2 uppercase pipe and lowercase pipe example. Angular UpperCasePipe transforms string to uppercase and LowerCasePipe transforms string to lowercase. It is used as follows.
UpperCasePipe uses uppercase keyword to transform string into uppercase as given below.

{{message | uppercase}}

Here message is a component property. LowerCasePipe uses lowercase keyword to transform string into lowercase as given below.

{{message | lowercase}}

Now we will discuss UpperCasePipe and LowerCasePipe example step by step using typescript.

Software Used

Find the software used in our demo.
1. Angular 2.3.0
2. TypeScript 2.0.10
3. Node.js 4.6.0
4. NPM 3.10.8
5. Firefox 50.1.0

UpperCasePipe

UpperCasePipe is a PIPE that transforms string to uppercase. It relates to CommonModule. Find the syntax of UpperCasePipe as below.

expression | uppercase

The expression result will be converted into uppercase. Find the example.
uppercasepipe.component.ts
import {Component} from '@angular/core';
@Component({
    selector: 'uppercasepipe-app',
    template: `
               <b>uppercase pipe demo</b> <br/>

    	       {{address.village | uppercase}}
	       <p [textContent] ="address.district | uppercase" > </p>
	       <input (input) = "setData($event.target.value)">
               {{inputData | uppercase}}			
	     `
})
export class UpperCasePipeComponent { 
        inputData : string;
	address = {
	    village : 'Dhananjaypur',
	    district: 'Varanasi'
	}
	setData(data:string) {
	   this.inputData = data;
	}
}  

LowerCasePipe

LowerCasePipe is a PIPE that transforms string to lowercase. It relates to CommonModule. Find the syntax of LowerCasePipe as below.

expression | lowercase

The expression result will be converted into lowercase. Find the example.
lowercasepipe.component.ts
import {Component} from '@angular/core';
@Component({
    selector: 'lowercasepipe-app',
    template: `
	            <b>lowercase pipe demo</b> <br/>
				
		    {{address.village | lowercase}}
		    <p [textContent] ="address.district | lowercase" > </p>
		    <input (input) = "setMsg($event.target.value)">
		    {{message | lowercase}}
	     `
})
export class LowerCasePipeComponent { 
        message : string;
	address = {
	    village : 'Dhananjaypur',
	    district: 'Varanasi'
	}
	setMsg(data:string) {
	   this.message = data;
	}
}  

Create Component, Module, Main and index.html


app.component.ts
import {Component} from '@angular/core';
@Component({
    selector: 'pipe-app',
    template: `
	        <uppercasepipe-app> </uppercasepipe-app>
		<br/><br/>
	        <lowercasepipe-app> </lowercasepipe-app>
	      `
})
export class AppComponent { }  
module.ts
import {NgModule}       from '@angular/core';
import {BrowserModule}  from '@angular/platform-browser';
import {AppComponent}  from './app.component';
import {UpperCasePipeComponent}  from './uppercasepipe.component';
import {LowerCasePipeComponent}  from './lowercasepipe.component';
@NgModule({
  imports:      [BrowserModule],
  declarations: [AppComponent,
                 UpperCasePipeComponent,
		 LowerCasePipeComponent],
  bootstrap:    [AppComponent]
})
export class AppModule { } 
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);  
index.html
<html>
  <head>
    <title>Angular 2 Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('myApp').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
    <pipe-app>Please Wait...</pipe-app>
  </body>
</html> 

Run Application

Find the steps to run the example.
1. Install Node.js and NPM in the system if not already installed. Make sure that Node.js version must be 4.x.x or higher and NPM version must be 3.x.x or higher.
2. Download the source code using download link given below in the example.
3. Go to the root folder of the project using command prompt and run npm install command.
4. Now run npm start command.
5. Now run index.html file. Find the print screen of the output.
Angular 2 UpperCase Pipe and LowerCase Pipe Example

References

Angular 2 UpperCasePipe
Angular 2 LowerCasePipe

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us