Angular Uppercase Pipe : Convert string/text to uppercase in Angular

To convert string or text to uppercase in Angular we can use Angular UpperCasePipe.

Pass input string to the uppercase pipe as shown below.

<p>{{'uppercasepipe convert string to uppercase in angular'
| uppercase}}</p>
<!-- Output -->
<!--UPPERCASEPIPE CONVERT STRING TO UPPERCASE IN ANGULAR-->

Angular UpperCasePipe is one of the built in pipes which converts text to uppercase.

UpperCasePipe Usage & Syntax

The syntax is very similar to other built in pipes, we need to pass input string to uppercase pipe without any parameters

{{ string | uppercase }}

UpperCasePipe Examples

We go through the different types of strings and convert them to uppercase using Angular UpperCasePipe.

We will create a component called uppercase component in our Angular project, will convert different kind of inputs to uppercase.

<p>{{'angular uppercase' | uppercase}}</p>
<!-- output is "ANGULAR UPPERCASE" --> 
<!-- Ultra numeric string to uppercase -->
<p>{{'angular version 9' | uppercase}}</p> 
<!-- output is "ANGULAR VERSION 9" --> 

Error: InvalidPipeArgument for pipe ‘UpperCasePipe’

Angular uppercase pipe accepts only string types. If you pass other types like number or object etc. you will get Error: InvalidPipeArgument for pipe 'UpperCasePipe' error.

{{ 1 | uppercase}}

The above code won’t compile at all and angular cli returns following error

error TS2345: Argument of type '1' is not assignable 
to parameter of type 'string'.

We will test uppercase pipe with other type variables.

export class UpperCasePipeComponent implements OnInit {

id : number;
products : Product[];

constructor() { 
    this.id = 123;
    this.products = [
       {id:1,name:"product1"},
       {id:2,name:"product2"}
    ];
}

}  


interface Product{
  id: number;
  name : string;
}

And now angular cli will return error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'. error when we try to execute below code.

 {{ id | uppercase}}

Same with the type product

 {{ products | uppercase}}

 error TS2345: Argument of type 'Product[]' is not 
 assignable to parameter of type 'string'.

Now we will test uppercase pipe with variable of type any.

 uppercasevariable: any;

 constructor(){
   this.uppercasevariable = 1;
 }


 {{ uppercasevariable | uppercase}}

And now there will be no compile time errors and at run time we will get following error.

and in addition to that you will get another error

If you pass object to uppercase pipe you will get following error. I mean when I assign a object to variable type of any.

If you assign string to any type variable uppercase pipe will work as expected.