How to set values of angular custom input components (control value accessors) from parent?

Question

We have the ability to set values (in case if needed) for native input elements such as checkboxes, text input etc..

It will be like this :

In this way we can bind custom values to the native input elements.

How can I achieve similar result with a custom input element implemented with control value accessor?

For example consider this custom Input component:


@Component({
  selector: 'child-custom-input',
  templateUrl: './child-custom-input.component.html',
  styleUrls: [],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChildCustomInputComponent),
      multi: true,
    },
  ],
})
export class ChildCustomInputComponent implements ControlValueAccessor {
  _value: boolean;

  onChanged: any = () => {};
  onTouched: any = () => {};

  constructor() {}

  writeValue(value: any) {
    this._value = value;
  }

  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setValue(value) {
    this._value = value;
    this.onChanged(value);
    this.check.emit(value);
  }

Following is from the parent component:

// parent-component.html

How can I achieve such a result?

Like setting a default/ initial value from the parent component to the custom child input component.

// child-custom-input.component.html

Or could be something like a checkbox. The only thing required is to set value from the parent component to this custom child input component.

// child-custom-input.component.html

user_1277159 · Answer

In order to do so, you need to also define an @Input() value: any property and the appropriate getter and setter in your ChildCustomInputComponent.

export class ChildCustomInputComponent implements ControlValueAccessor {
.
.
.

  //The internal data model
  private innerValue: any = '';

  //get accessor
  @Input()
  get value(): any {
    return this.innerValue;
  }

  //set accessor including call the onchange callback
  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

}

That way you should be able to use the ChildCustomInputComponent and define their value property from any parent component like this:

For further clarification please check the following working example: https://plnkr.co/edit/zNOYwrLsszY54DDL

How to set values of angular custom input components (control value accessors) from parent?

1 Answers