How to create custom input component with ngModel working in angular 6?

Solution 1:

I came across the same problem some time ago and want to share a minimal example that works with Angular 2+.

For newer Angular versions, there is a simplified approach (scroll down)!

Angular 2+

Assume you would like to use following code anywhere in your app:

<app-input-slider [(ngModel)]="inputSliderValue"></app-input-slider>

1. Now create a component called InputSlider.

2. In the input-slider.component.html, add the following:

   <input type="range" [(ngModel)]="value" (ngModelChange)="updateChanges()">
   

3. Now we have to do some work in the input-slider.component.ts file:

   import {Component, forwardRef, OnInit} from "@angular/core";
   import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
   
   @Component({
       selector: "app-input-slider",
       templateUrl: "./input-slider.component.html",
       styleUrls: ["./input-slider.component.scss"],
       providers: [{
           provide: NG_VALUE_ACCESSOR,
           useExisting: forwardRef(() => InputSliderComponent),
           multi: true
       }]
   
   })
   export class InputSliderComponent implements ControlValueAccessor {
   
    /**
     * Holds the current value of the slider
     */
    value: number = 0;
   
    /**
     * Invoked when the model has been changed
     */
    onChange: (_: any) => void = (_: any) => {};
   
    /**
     * Invoked when the model has been touched
     */
    onTouched: () => void = () => {};
   
    constructor() {}
   
    /**
     * Method that is invoked on an update of a model.
     */
    updateChanges() {
        this.onChange(this.value);
    }
   
    ///////////////
    // OVERRIDES //
    ///////////////
   
    /**
     * Writes a new item to the element.
     * @param value the value
     */
    writeValue(value: number): void {
        this.value = value;
        this.updateChanges();
    }
   
    /**
     * Registers a callback function that should be called when the control's value changes in the UI.
     * @param fn
     */
    registerOnChange(fn: any): void {
        this.onChange = fn;
    }
   
    /**
     * Registers a callback function that should be called when the control receives a blur event.
     * @param fn
     */
    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
   

   }

Of course you could add more functionality and value checks using this class, but I hope it will get you some ideas.

Quick explanation:

The trick is to add the provider NG_VALUE_ACCESSOR on the decorator of the class and implement ControlValueAccessor.

Then we need to define the functions writeValue, registerOnChange and registerOnTouched. The two latter are directly called on creation of the component. That is why we need to variables (for example onChange and onTouched - but you can name them however you like.

Finally, we need to define a function that lets the component know to update the underlying ngModel. I did that with the function updateChanges. It needs to be invoked whenever the value changes, either from outside (that's why it is called in writeValue), or from inside (that's why it is called from the html ngModelChange).

Angular 7+

While the first approach still works for newer versions, you might prefer the following version that needs less typing.

In earlier days, you would achieve two-way binding by adding something like this in the outer component:

<app-input-slider [inputSliderValue]="inputSliderValue" (inputSliderValueChange)="inputSliderValue = $event"></app-input-slider>

Angular implemented syntactic sugar for that, so you can now write

<app-input-slider [(inputSliderValue)]="inputSliderValue"></app-input-slider>

if you follow the steps below.

1. Create a component called InputSlider.

2. In the input-slider.component.html, add the following:

    <input type="range" [(ngModel)]="inputSliderValue (ngModelChange)="inputSliderValueChange.emit(inputSliderValue)">
   

3. Now we have to do some work in the input-slider.component.ts file:

   import {Component, forwardRef, OnInit} from "@angular/core";
   
   @Component({
       selector: "app-input-slider",
       templateUrl: "./input-slider.component.html",
       styleUrls: ["./input-slider.component.scss"],
       providers: []
   })
   export class InputSliderComponent {
   
       /**
        * Holds the current value of the slider
        */
       @Input() inputSliderValue: string = "";
   
       /**
        * Invoked when the model has been changed
        */
       @Output() inputSliderValueChange: EventEmitter<string> = new EventEmitter<string>();
   
    }
   

It is important that the output property (EventEmitter) has the same name than the input property with the appended string Change.

If we compare both approaches, we note the following:

• The first approach allows you to use [(ngModel)]="propertyNameOutsideTheComponent" as if the component were any form element.
• Only the first approach lets you directly use validation (for forms).
• But the first approach needs more coding inside the component class than the second approach
• The second approach lets you use a two-way binding on your property with the syntax [(propertyNameInsideTheComponent)]="propertyNameOutsideTheComponent"

Solution 2:

this can also be done like this, when you create a two way binding [()] you can bind it to a function using the same name + 'change' (in our case inputModel and inputModelChange) this way the ngModel will update when you trigger inputModelChange.emit('updatedValue'). and you only need to declare it once inside your component.

app-input.component.ts

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-input',
  template: `  <input type="text" [(ngModel)]="inputModel" (ngModelChange)="inputModelChange.emit(inputModel)"/>`,
  styleUrls: ['./app-input.component.scss']
})
export class AppInputComponent {
  @Input() inputModel: string;
  @Output() inputModelChange = new EventEmitter<string>();
}

app.component.html

<app-input [(inputModel)]="externalValue"></app-input>