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

Question

Since I use inputs with a lot of the same directives and .css classes applyed, I want to extract the repeated code to some component like this:

  @Component({
  selector: "app-input",
  template: `
    <div class="...">
      <input type="..." name="..." class="..." [(ngModel)]="value" someDirectives...>
      <label for="...">...</label>
    </div>
  `,
  ...
  })
  export class InputComponent implements OnInit {
    // some implementation connecting external ngModel with internal "value" one
  }

The problem here is creating a component in such a way that it can be used with ngModel as an ordinary input:

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

I've found several solutions on the internet that can be partially or completely outdated now like: Angular 2 custom form input Can this be done in a better way in angular 6?

Answer 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"

Answer 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>

Answer 3

If you don't care about binding your variable by [ngModel] in template-model or [formControl] in reactive-form, you can use omer answer.

Otherwise:

1. Add NG_VALUE_ACCESSOR injection token into your component definition:

   import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   
   @Component({
      ...,
      providers: [
        {
           provide: NG_VALUE_ACCESSOR,
           useExisting: forwardRef(() => AppInputComponent),
           multi: true
        }
      ]
   })
   

2. Implement ControlValueAccessor interface:

   export class AppInputComponent implements ControlValueAccessor {
   
     writeValue(obj: any): void {
       // Step 3
     }
   
     registerOnChange(fn: any): void {
       this.onChange = fn;
     }
   
     registerOnTouched(fn: any): void {
       this.onTouched = fn;
     }
   
     setDisabledState?(isDisabled: boolean): void {
     }
   
     onChange: any = () => { };
   
     onTouched: any = () => { };
   
   }
   

3. Manage value when it changes:

   private _value;
   
   public get value(){
     return this._value;
   }
   
   public set value(v){
     this._value = v;
     this.onChange(this._value);
     this.onTouched();
   }
   
   writeValue(obj: any): void {
     this._value = obj;
   }
   
   // Optional
   onSomeEventOccured(newValue){
     this.value = newValue;
   }
   

Now you can use <app-input [(ngModel)]="externalValue" ... ></app-input>

Answer 4

You can use shareservice which communicate between tow components without use input or output like below

Service

import {Injectable} from '@angular/core';

@Injectable()
export class ShareService {
   public data: string;

   setData(newdata : string){
       this.data = newdata;
   }

   clearData(){
       this.data = '';
   }
}

Component that sets the value

export class PageA {
    constructor(private shareService: ShareService, private router: Router){
    }
    gotoPageB(){
        this.shareService.setData("Sample data");
        this.router.navigate(['pageb']);  
    }

}

Component that gets the value

export class PageB {
    constructor(private shareService: ShareService){ }

    get somedata() : string {
      return this.shareService.data;
    }
}

The key here is to use a getter property in the component that gets the value (PageB in this example) so it is updated any time that the data service value changes.

Answer 5

You can use @Input directive for passing the externalValue into the component and binding with it.

Here's a code:

  @Component({
  selector: "app-input",
  template: `
    <div class="...">
      <input type="..." name="..." class="..." [(ngModel)]="externalValue" someDirectives...>
      <label for="...">...</label>
    </div>
  `,
  })

  export class InputComponent implements OnInit {
     @Input('externalValue') externalValue : any;
  }

And in your parent component, you can use it like:

<app-input [externalValue]="externalValue" ... ></app-input>