Pass object reference to Angular2 Component to be used in ngModel

Question

I have a component with this code inside:

<div class="form-group">
    <label for="title">Title</label>
    <input type="text" [(ngModel)]="model.title" name="title" required/>
</div>

I am trying to migrate the whole thing into another component, input-component:

@Component({
    selector: 'input-component',
    template: `
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" [(ngModel)]="value" name="title" required/>
        </div>
    `
})
export class InputComponent {
    @Input() value: string;
}

So the first example code will be replaced with:

<input-component [value]="model.title"></input-component>

When model.title is changed, the value inside the HTML element is changed, however when I change the contents of the element, model.title does not change.

How can I achieve two-way data binding with this setup?

James Monger · Accepted Answer · 2016-10-29 13:38:07Z

1

I needed to create an EventEmitter to do this:

@Component({
    selector: 'input-component',
    template: `
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" [ngModel]="value" (ngModelChange)="onInput($event)" name="title" required/>
        </div>
    `
})
export class InputComponent {
    @Input() value: string;
    @Output() valueChange = new EventEmitter();

    public onInput(event: string) {
        this.value = event;
        this.valueChange.emit(event);
    }
}

answered Oct 29, 2016 at 13:38

James Monger

10.8k9 gold badges65 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

micronyks Over a year ago

@PankajParkar it will not work without EventEmitter.

Pankaj Parkar Over a year ago

@micronyks parden me, I thought the other way :) Thanks for letting me know

micronyks · Accepted Answer · 2016-10-29 13:59:57Z

0

Still better way would be,

<input-component [(value)]="model.title"></input-component>

    <input type="text" [(ngModel)]="value" name="title" 
                       (keyup)="update(value)" required/>      ///<<<### keyup


    export class InputComponent {
        @Input() value: string;
        @Output  valueChange:EventEmitter=new EventEmitter();  ///<<<### added

       update(value){
           this.valueChange.emit(value);
       }
    }

answered Oct 29, 2016 at 13:59

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

2 Comments

James Monger Over a year ago

Why is this better (relying on keyup rather than ngModelChange)?

micronyks Over a year ago

Opps ! I didn't see your answer properly. Yours is better and having no problem.

Collectives™ on Stack Overflow

Pass object reference to Angular2 Component to be used in ngModel

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related