Angular uppercase and lowercase Pipe Example
By Webrecto, 20 July 2023
In this article we will learn about
1 : The
2 : The
3 : The
Output
2 : Uppercase pipe with Object.
I have the following object.
Now use
Output
Output
2 : Lowercase pipe with Object.
Output
lowercasepipe.component.ts
app.component.ts
app.module.ts
Find the print screen of the output.
uppercase and lowercase pipe in our Angular application.
1 : The
UpperCasePipe transform text to all upper case. Find the syntax.
{{ value_expression | uppercase }}
LowerCasePipe transform text to all lower case. Find the Syntax.
{{ value_expression | lowercase }}
uppercase and lowercase pipe are imported from CommonModule
Using uppercase
1 : Uppercase pipe with string.
<p>{{'India' | uppercase}}</p>
INDIA
I have the following object.
address = {
village : 'Raipur',
district: 'Jaunpur'
}
uppercase pipe with this object.
<p>{{address.village | uppercase}}</p>
<p>{{address.district | uppercase}}</p>
RAIPUR JAUNPUR
Using lowercase
1 : Lowercase pipe with string.
<p>{{'WELCOME' | lowercase}}</p>
welcome
<p>{{address.village | lowercase }}</p>
raipur
Complete Example
uppercasepipe.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'uppercasepipe-app',
template: `
<b>uppercase pipe example</b> <br/>
<p>{{inputData | uppercase}}</p>
<p>{{address.village | uppercase}}</p>
<p [textContent] ="address.district | uppercase"></p>
`
})
export class UpperCasePipeComponent {
inputData = 'India';
address = {
village: 'Raipur',
district: 'Jaunpur'
}
}
import { Component } from '@angular/core';
@Component({
selector: 'lowercasepipe-app',
template: `
<b>lowercase pipe example</b> <br/>
<p>{{'WELCOME' | lowercase}}</p>
<p>{{address.village | lowercase}}</p>
<p [textContent] ="address.district | lowercase" > </p>
`
})
export class LowerCasePipeComponent {
message = 'WELCOME!';
address = {
village: 'Anai',
district: 'Bhadohi'
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<uppercasepipe-app> </uppercasepipe-app>
<br/><br/>
<lowercasepipe-app> </lowercasepipe-app>
`
})
export class AppComponent { }
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 { }