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.