Hi Dev
This article will give you example of lowercase pipe angular 9/8/7 example. let’s discuss about to lowercase pipe angular. i explained simply step by step lowercase pipe angular 9. i would like to share with you angular lowercase pipe example. So, let's follow few step to create example of convert to lowercase in angular.
In this tutorial, i will provide you 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.
I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.
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;
}
}
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example