Create Custom Textbox In Angular 8 Using Input And Output Decorators

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.

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.

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.