Post
Ask Question

Create Custom Textbox In Angular 8 Using Input And Output Decorators

Introduction

 
Input and Output decorators are used to pass values from one component to another component in Angular. Usually, Input parameters pass values from the parent component to child component and Output parameters are used to pass values from the child component to the parent component. We will create a child component as a custom textbox component and get values from parent component which uses this custom child component. We will use the same input parameter for getting model value from the custom component as well. For this, we will use an Output parameter with an event emitter variable as a string. We will use another input decorator for getting the maximum number of characters that custom textbox can accept. If we give zero as the maximum character length, the custom textbox will allow unlimited characters. We will write the logic for that inside our custom component. We will also provide one more input decorator to restrict numeric values inside the custom textbox if needed. We will write that logic as well.
 

Create a new Angular project using CLI

 
We can use Angular CLI to create a new project using the below command:
 
ng new CustomTextbox
 
The above command will create a new Angular project with default dependencies. It will take some time to create all node packages inside the node_modules folder.
 
By default, we have only one component inside the project. The component name is “App” component.
 
We can create a new component for our custom textbox using below command.
 
ng g c CustomText
 
This is the shortcut for "ng generate component <component name>"
 
The above command will add a new component to the project. Please note, Angular CLI will add required entries in the app.module.ts file also.
 
You can notice in the component selector as “app-custom-text" inside the newly created “custom-textbox.component.ts” file. This is the component class file.
 
Create Custom Textbox In Angular 8 Using Input And Output Decorators
 
We can add the required Input and Output decorators inside this component class file.
  1. @Input() inputModel: string;  
  2. @Input() maxLength: number;  
  3. @Input() isNumeric: boolean;  
We have created three input decorators. “inputModel” is a string decorator. If you define a string decorator, you must pass the value as a model variable. For that, we must declare a variable inside the parent component also. “maxLength” decorator is a numeric decorator.
 
Hence, we can directly pass the value from the parent component. This decorator variable is used to limit the maximum number of allowed characters in a custom textbox. You will notice that “maxLength” is a default attribute in Angular still we can use it as an input parameter also. “isNumeric” decorator is used to restrict only numeric values inside the custom textbox. This is a boolean type decorator. Like number decorator, we can directly pass input parameters for boolean type also.
 
By default, the value of this variable is false, and all type of characters will be accepted in the custom textbox. If the value of “isNumeric” is passed as true from the parent component, the custom textbox will only accept numeric values. We can add that logic soon.
 
We can declare an Output decorator now.
  1. @Output() inputModelChange = new EventEmitter<string>();  
We have defined a variable “inputModelChange” as Output decorator. This variable declared as a new EventEmitter of string type. We will add a new method “textChange” and will map this method with “ngModelChange” event in the HTML file of the component.
 
We can complete the entire code of this component class as below.
 
custom-text.component.ts
  1. import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-custom-text',  
  5.   templateUrl: './custom-text.component.html',  
  6.   styleUrls: ['./custom-text.component.css']  
  7. })  
  8. export class CustomTextComponent implements OnInit {  
  9.   
  10.   constructor() { }  
  11.   
  12.   @Input() inputModel: string;  
  13.   @Input() maxLength: number;  
  14.   @Input() isNumeric: boolean;  
  15.   
  16.   @Output() inputModelChange = new EventEmitter<string>();  
  17.   
  18.   totalCharLengthText: string  
  19.   
  20.   textCount: number;  
  21.     
  22.   ngOnInit() {  
  23.     this.textCount = this.inputModel.length;  
  24.     this.totalCharLengthText = (this.maxLength==0)?'Unlimited':(this.maxLength).toString();  
  25.   }  
  26.   
  27.   textChange(){  
  28.     this.inputModelChange.emit(this.inputModel);  
  29.     this.textCount = this.inputModel.length;  
  30.   }  
  31.   
  32.   numberOnly(event:any): boolean {  
  33.     if(!this.isNumeric) return true;  
  34.     const charCode = (event.which) ? event.which : event.keyCode;  
  35.     if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !=46 ) {  
  36.       return false;  
  37.     }  
  38.     return true;  
  39.   }  
  40. }  
We can modify the html file of this component with the below code.
 
custom-text.component.html
  1. <div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px">  
  2.     <div>  
  3.         <div>  
  4.             Total Characters : {{textCount}} / {{totalCharLengthText}}  
  5.         </div>  
  6.         <input type="text"  (keypress)="numberOnly($event)"  [(ngModel)]="inputModel" (ngModelChange)="textChange()" [maxlength]="maxLength"  
  7.             style="width:300px" />  
  8.     </div>  
  9. </div>  
We have used “ngModel” attribute and “ngModelChange” event in above html file. Hence, we must import “FormsModule” module in “app.modulte.ts” file. Otherwise, we will get an error in the application console while running.
 
We have completed the coding part of the entire custom textbox component. We can consume this component in our “App” component.
 
app.component.html
  1. <div style="text-align:center">  
  2.   <h2>  
  3.     Create custom Textbox in Angular 8 with Input & Output Decorators  
  4.   </h2>  
  5.   <div>  
  6.     <app-custom-text [(inputModel)]="data1" [maxLength]="0"></app-custom-text>  
  7.   </div>  
  8.   <br />  
  9.   <div>  
  10.     <app-custom-text [(inputModel)]="data2" [maxLength]="10" [isNumeric]="true" ></app-custom-text>  
  11.   </div>  
  12. </div>  
Please note, we have passed only “inputModel” parameter from app component. This should be mapped with a model variable inside the component class, so that we can pass values from app component to custom textbox component bi-directionally.
 
I have created two instances for custom textbox component in the app component. In the first instance, we have passed maxLength as zero. In the second instance, we have passed a specific value for maxLength. In the second instance, we have marked “isNumeric” as true. Hence, this textbox will accept only numeric values.
 
We can add model variables in the app component class file also.
 
app.component.ts
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   data1: string = 'Sarathlal Saseendran';  
  10.   data2: string = '12345';  
  11. }  
We have completed entire coding part. We can run the application now.
 
Create Custom Textbox In Angular 8 Using Input And Output Decorators
 
The default values assigned in the model (from the app component) are listed above. We can modify these values as per our need. New values are immediately reflected in the parent component through event emitter and output decorator.
 
Create Custom Textbox In Angular 8 Using Input And Output Decorators

Conclusion

 
In this post, we have seen how to create a custom textbox component in Angular 8 using Input and Output decorators. It is easy yet very powerful in our real-life applications. We have restricted the maximum number of characters in the textbox using another input decorator. We have also seen how to allow only numeric values inside the textbox using one more input parameter. This is a very simple article, but I hope this will be useful for readers who did not try these decorators yet to create a custom component. 


Similar Articles