How to autocapitalize the first character in an input field only when the mouse click out side using directives in AngularJS?

Question

While typing the text it will be in lower case, but while the mouse focused out, then the first letter have to change to uppercase.

Answer 1

I am assuming you are not using reactive forms. There is no need for a separate directive, as all you need to do is to handle the focus out event. Basically, you can bind the focusout event to your input. Upon focusing out, the trigger() method will be fired.

On your component.html,

<input class="form-control" (focusout)="trigger($event)" [(ngModel)]="sampleInput" type="text">

And on your component.ts, the trigger() method converts the first letter to uppercase. Then, we assign the converted string to your model (sampleInput)

sampleInput: string = undefined;
.
.
trigger(event) {
  const inputValue = event.target.value;
  const result = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
  this.sampleInput = result;
}

However, on a not-so-related note, my personal favourite would be to handle it via pure CSS. But of course, there are limitations to this solution, as it capitalises the first letter of every word in your string (eg. 'hi john' -> 'Hi John'), instead of only the first letter of your entire string. One obvious advantage of this method is that does not mutate the underlying value of that string, as only the 'display' is affected.

input {
  text-transform: capitalize;
}