HDTuto.com

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



Hi Dev

Here, i will show you uppercase pipe angular 9/8/7 example. you can understand a concept of to uppercase pipe angular. it's simple example of uppercase pipe angular 9. you'll learn angular uppercase pipe example. Let's get started with convert to uppercase 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 | uppercase }}

Uppercase Pipe Example

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myString | uppercase }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myString = "This is Angular Uppercase Pipe Example";

}

Output

THIS IS ANGULAR UPPERCASE PIPE EXAMPLE

Uppercase Pipe with Input Example

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `<div>

<input (input) = "setDataOnChange($event.target.value)">

<p>{{ myString | uppercase }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myString = "";

setDataOnChange(value){

this.myString = value;

}

}

I hope it can help you...




April 26, 2020 | Category : Angular



Blog Search