How to use Pipes within ngModel on input Element in Angular ?
Last Updated :
28 Apr, 2025
The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. In this article, we will learn about Using Pipes within ngModel on <input> Elements in Angular.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Creating pipe; go to cd/src
ng generate pipe geek
Project Structure
It will look like the following:
Example 1: In this example, we will use a capitalize pipe with ngModel that will help to capitalize the string that we enter in the input. Try to enter lowercase letters in the input, but our pipe will automatically make it in uppercase.
HTML
<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
Using Pipes within ngModel
on INPUT Elements in Angular
</h2>
<input [ngModel]="msg | capitalize"
(ngModelChange)="msg=$event"
name="name"
type="text" />
<p>{{msg}}</p>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
msg: string = ""
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
import { FormsModule }
from '@angular/forms';
import { GeekPipe }
from './geek.pipe';
@NgModule({
declarations: [
AppComponent,
GeekPipe
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// geek.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class GeekPipe implements PipeTransform {
transform(val: string): string {
return val.toLocaleUpperCase()
}
}
Output:
Example 2: In this example, we will see that we have used a pipe called lowercase, and it will not let you enter uppercase characters. Even if our capslock is on, it will convert our characters to lowercase.
HTML
<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
Using Pipes within ngModel
on INPUT Elements in Angular
</h2>
<input [ngModel]="msg | lowercase"
(ngModelChange)="msg=$event"
name="name"
type="text" />
<p>{{msg}}</p>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
msg: string = ""
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
import { FormsModule }
from '@angular/forms';
import { GeekPipe }
from './geek.pipe';
@NgModule({
declarations: [
AppComponent,
GeekPipe
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// geek.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'lowercase'
})
export class GeekPipe implements PipeTransform {
transform(val: string): string {
return val.toLowerCase()
}
}
Output:
Similar Reads
How to detect when an @Input() value changes in Angular? @Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper
3 min read
How to use ngFor with index as value in Attribute in Angular ? NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. In this article, we will learn how to store the index value of ngFor in an attribute so I can utilize it. Creating Angular application & Module Installation Step
3 min read
How to achieve Two-Way Data Binding in Angular with ngModel ? Two-way Data Binding in Angular allows you to automatically synchronize data between a component class property and an input element (e.g., an input field) in your template. To achieve this binding, it's typically used with Angular [(ngModel)] Â directive. This is basically the combination of the Pro
3 min read
How to Use the Async Pipe in Angular? The AsyncPipe in Angular is a powerful and convenient tool used to handle asynchronous data streams such as observables and promises directly in the component template. It automatically subscribes to observables, renders their values, and updates the view when new data is emitted. This removes the n
3 min read
How to use filter within controllers in AngularJS ? In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although,
4 min read
How to call an Angular Pipe with Multiple Arguments ? Angular Pipes are a way to transform the format of output data for display. The data can be strings, currency amounts, dates, etc. Pipes are simple functions that accept an input and return a transformed value in a more technical understanding. In this article, we will see How to call an Angular Pip
3 min read