Easiest way I found to format text as you type with Angular

Recently at work, I needed to create an form input that formats text to uppercase as I type. I tried to create it using a directive but that was too cumbersome. Here is how I solved it

We are going to create a custom component to do this

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

@Component({
    selector: 'app-upper-case-input',
   template: `<input type="text" [(ngModel)]=value />`
})
export class UpperCaseInputComponent {
   private _value;

   get value() {
       return this._value;
   }

  set value(value: string) {
      this._value = value.toUpperCase();
  }
}

And you are all set, you can use this component where necessary. This example formats the input as uppercase but you could apply the same approach for say formatting phone numbers or postal codes.

Happy Coding...:)