Custom input and output on same name in Angular2 2 way binding

Question

I know how to fix my component using a different name for the output value of this component.

Let me share my code

import { Component, Input, Output, EventEmitter } from "@angular/core";
import { TranslationPipe } from "../pipes/translation.pipe";

@Component({
  selector: "msisdn-confirm",
  template: `
    <div class="msisdn-confirm">
      <div>
        <input type="text" [(ngModel)]="m1" />
      </div>
      <div>
        <input type="text" [(ngModel)]="m2" />
      </div>
      <p class="error">{{ message }}</p>
    </div>
  `,
})
export class MsisdnConfirm {
  message: string;
  @Output("mobile") emitter: EventEmitter<string> = new EventEmitter<string>();
  @Input("mobile") set setMobileValue(value) {
    this.msisdn_confirm = this.msisdn = value;
  }

  set m1(value) {
    this.msisdn = value;
    if (this.valid()) {
      console.log("emit" + this.msisdn);
      this.emitter.emit(this.msisdn);
    }
  }

  set m2(value) {
    this.msisdn_confirm = value;
    if (this.valid()) {
      console.log("emit" + this.msisdn);
      this.emitter.emit(this.msisdn);
    }
  }

  get m1(): string {
    return this.msisdn;
  }
  get m2(): string {
    return this.msisdn_confirm;
  }

  msisdn: string;
  msisdn_confirm: string;

  constructor() {}

  private valid(): boolean {
    if (!/06[0-9]{8}/.test(this.msisdn)) {
      this.message = new TranslationPipe().transform(
        "Het mobiele nummer is incorrect, (bijvoorbeeld: 0612345678)"
      );
      return false;
    } else if (this.msisdn != this.msisdn_confirm) {
      this.message = new TranslationPipe().transform(
        "De mobiele nummers komen niet overeen"
      );
      return false;
    }
    this.message = null;
    return true;
  }
}

So this is a very basic component which validates two strings to be a "valid" dutch Mobile number, so a confirm box so to say. Now I can get my value in the parent component by doing something like

(mobile)="myParam = $event"

What I want is to use it like

[(mobile)]="myParam"

This only works for setting though, is this not supported on custom components?

score 57 · Accepted Answer · edited Oct 17 '20 at 18:17

57

For this compact syntax to work the input and output need to follow specific naming rules

[(mobile)]="myParam"

  @Output('mobileChange') emitter: EventEmitter<string> = new EventEmitter<string>();
  @Input('mobile') set setMobileValue(value) {
    this.msisdn_confirm = this.msisdn = value;
  }

Renaming inputs and outputs by passing a string parameter to the decorator is discourages. Rather use

  @Output() mobileChange: EventEmitter<string> = new EventEmitter<string>();
  @Input() set mobile(value) {
    this.msisdn_confirm = this.msisdn = value;
  }

edited Oct 17 '20 at 18:17

Community

1
1

answered Jun 16 '16 at 09:28

Günter Zöchbauer

623,577
216
2,003
1,567

Hey thanks again Günter, This was not obvious I guess docs still need to be created for this stuff or I was looking at the wrong pages. It works like a charm. Have to wait a few minutes before I can accept your quick answer ;-) – Mathijs Segers Jun 16 '16 at 09:31
I'm sure this is documented (somewhere at http://angular.io). There is already so much documentation already that it's hard to find what you're looking for ;-) – Günter Zöchbauer Jun 16 '16 at 09:34
2

Hence it's good to put these things on stack overflow, it's my main source for docs anyway. – Mathijs Segers Jun 16 '16 at 09:35
Thank you - do you know where this is documented? – OldTimeGuitarGuy Jun 07 '17 at 15:29
4

Near the end of section https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way – Günter Zöchbauer Jun 07 '17 at 15:32
1

Thank you for the quick response! – OldTimeGuitarGuy Jun 07 '17 at 15:33
1

pascal also wrote about this subject, including a plunk: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html – Guntram Jun 20 '17 at 09:52
3

Updated link to the angular.io doc section: https://angular.io/guide/template-syntax#two-way-binding--- – Caio Campos Jun 20 '18 at 00:54
2

Updated updated link to the angular.io doc section: https://angular.io/guide/two-way-binding – ocket8888 Sep 02 '20 at 01:58
Sometimes this method gives me an infinite loop, and I have to add an extra conditional to check if the value changed before setting. Why is that? – cs_pupil Jan 12 '22 at 19:59

davaus · Answer 2 · 2018-07-18T04:29:42.067

18

Another example of Gunter's code above that may help:

export class TaskBook {
  public taskBookID: number;
  public title: String; 
}

Inside component code:

   ....
    <input type="text"  pInputText [(ngModel)]="data!.title" (change)="onDataChange()" />
   ....

 @Component({
  selector: 'taskbook_edit',
  templateUrl: './taskbook_edit.component.html' 
})
    export class TaskbookEditComponent { 

      @Input() data: TaskBook;
      @Output() dataChange = new EventEmitter<TaskBook>();

      constructor() { } 

      onDataChange() { 
        this.dataChange.emit(this.data);
      }  
    }

Outside in calling component:

<taskbook_edit  [(data)]="taskbookObj" ></taskbook_edit>

 public taskbookObj: TaskBook;

edited Jul 18 '18 at 04:29

answered Jul 18 '18 at 04:24

davaus

1,145
13
16

3

Günter's answer was reusing the OP's code, but I think yours is clearer for anyone else still not very familiar with some parts of Angular syntax. Thank you for this example! – Carrm Mar 18 '19 at 16:18
3

That was my intent :) Thanks for the comment. – davaus Mar 20 '19 at 05:04

Custom input and output on same name in Angular2 2 way binding

2 Answers2

Linked