Skip to content
Related Articles

Related Articles

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


app.component.html:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


app.module.ts:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :