How to Convert input field text to uppercase in Angular

Angular Uppercase Input

To convert input field text to uppercase in angular we can use (ngModelChange) method.

We will go through an example to understand it further.

We will create a component called UppercaseInputComponent in our Angular project and then will bind <input> field to a variable called inputValue using (ngModel).

export class UppercaseInputComponent implements OnInit {

  inputvalue = "";
  constructor() { }

  ngOnInit() {


And in our component file we will create an uppercase input field as shown below.

<input [ngModel]="inputvalue" 
       (ngModelChange)="inputvalue = $event.toUpperCase()">

Uppercase input Value : {{inputvalue}}

In (ngModelChange) method on every key press event we are converting input value to uppercase using javascript’s toUpperCase() method.

And the final inputValue variable contains uppercase text only.

☝ ✍ Angular Wiki ✍☝
Get a short & sweet Angular tutorials delivered to your inbox every couple of days. No spam ever. Unsubscribe any time.
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.