Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to make input appear as sentence case based on typing using Angular 8 ?

  • Last Updated : 17 Dec, 2020

In this example, we will see how to make input appear sentence case based on typing using angular8.

Approach:

  • First, we need to write code for the input type in the HTML file.
  • After writing the input type as text in HTML, using two-way binding i.e., using ngModel we can bind the value of the input field.
  • Now in order to make the input field sentence case, we can use the ngModelChange event to manipulate the value according to the requirement.
  • Make sure you are importing ‘FormsModule’ from ‘@angular/forms’.
  • After importing the module now we need to implement the function in the ts file where we can modify the input value using regex according to the requirement like sentence case and can display in the input field.
  • Once the above steps are done, start, or serve the project to run.

Code Implementation:

app.component.ts:

Javascript






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());
  
    }
}

app.component.html:

HTML




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

app.module.ts:

Javascript




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 { }

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :