Hello Devs,
In this tutorial, we will learn Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
In this section, we will see full example and how to use angular usercase pipe with string and input field. you can use it in angular 6, angular 7, angular 8 and angular 9 application.
Follow this step by step guide below.
Syntax:
{{ value_expression | lowercase }}
Lowercase Pipe Example:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ myString | lowercase }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myString = "This is ANGULAR Lowercase Pipe Example";
}
Output:
this is angular lowercase pipe example
Lowercase Pipe with Input Example:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<input (input) = "setDataOnChange($event.target.value)">
<p>{{ myString | lowercase }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myString = "";
setDataOnChange(value){
this.myString = value;
}
}
May this example help you.