Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7

April 26, 2020 | Category : Angular

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...