¿Cómo hacer que la entrada aparezca como caso de oración basado en escribir usando Angular 8?

En este ejemplo, veremos cómo hacer que la entrada aparezca en mayúsculas y minúsculas según la escritura usando angular8.

Acercarse:

• Primero, necesitamos escribir código para el tipo de entrada en el archivo HTML.
• Después de escribir el tipo de entrada como texto en HTML, usando un enlace bidireccional, es decir, usando ngModel, podemos enlazar el valor del campo de entrada.
• Ahora, para hacer que la oración del campo de entrada sea un caso, podemos usar el evento ngModelChange para manipular el valor de acuerdo con el requisito.
• Asegúrese de importar ‘FormsModule’ desde ‘@angular/forms’.
• Después de importar el módulo, ahora debemos implementar la función en el archivo ts, donde podemos modificar el valor de entrada usando expresiones regulares de acuerdo con el requisito, como el caso de la oración, y se puede mostrar en el campo de entrada.
• Una vez realizados los pasos anteriores, inicie, o sirva el proyecto para ejecutar.

Implementación de código:

aplicación.componente.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    inputvalue = ''
  
    changeToSentenceCase(event) {
  
        this.inputvalue = event.replace(/\b\w/g, 
            event => event.toLocaleUpperCase());
  
    }
}

aplicación.componente.html:

<p>Type in textbox to make as sentence case.</p>
  
<input type='text' [(ngModel)]="inputvalue" 
    (ngModelChange)="changeToSentenceCase($event)">

aplicación.módulo.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
  
@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

Producción: