User input and output with the 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} of '@ angular / core'; import {TranslationPipe} from "../pipe/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 simple component that checks two lines as “valid” Dutch mobile numbers, so please confirm your selection. Now I can get my value in the parent component by doing something like

 (mobile)="myParam = $event" 

I want to use it as

 [(mobile)]="myParam" 

This only works for customization, is it not supported on custom components?

Answer 1

For this compact syntax to work, input and output must follow certain 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 not recommended. Use more likely

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