How to capitalize the first word of a sentence in Ionic 4?

Question

I'm trying to capitalize the first word of a sentence in Ionic 4 INPUT, but doesnt work after make many tests on CSS, ion-text-capitalize.... What is the easiest way to do it? Thank you so much

Answer 1

Writing an ionChange event handler for ion-textarea

I have deleted my previous answer and edited it to some working code.

I personally don't think this is a good solution because these types of things end up buggy or slow.

There is an ion-event that you can write against.

I've written a simple snippet which replaces the first letter with an uppercase letter.

(template-test.page.html)

<ion-content>
  <ion-title>Text Area Test</ion-title>
  <ion-item>
    <ion-textarea [(ngModel)]="someAutoFormattedInput" (ionChange)="onAutoFormatChanged()"></ion-textarea>
  </ion-item>
</ion-content>

(template-test.page.ts)

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

@Component({
  selector: 'app-textarea-test',
  templateUrl: './textarea-test.page.html',
  styleUrls: ['./textarea-test.page.scss'],
})
export class TextareaTestPage implements OnInit {

  someAutoFormattedInput: string;

  constructor() { }

  ngOnInit() {
  }

  onAutoFormatChanged() {
    this.someAutoFormattedInput = this.setFirstLetterToUppercase(this.someAutoFormattedInput);
  }

  private setFirstLetterToUppercase(string:string):string {
    // https://dzone.com/articles/how-to-capitalize-the-first-letter-of-a-string-in
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

}

Why I don't like this

As I said, these types of things end up buggy and laggy. This is both, but I've presented it as it might be "good enough" for your problem.

Buggy - for example, if you put a new first letter in, it will uppercase it, but the original letter in slot two will be uppercase. It's not easy to assume that you should lowercase everything else so writing rules to manage this is... buggy.

What I mean is:

Buggy

Uggy (delete the first letter, works good)

BUggy (add a new first letter, now we have a messy input)

There are probably other edge-cases lurking.

Laggy- This does string operations on the whole input, which could be very long, depending on what you're working with. This has the potential to be expensive and slow.

What I would do

I would let the user enter whatever they want and then when the data is saved I would do this formatting / cleaning up of the data.

Or I would use a custom pipe just to format the data as its being displayed and then store the original user input unaltered.