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?

Answer 1

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;   } 

Answer 2

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;