How can I make ngModel work with custom components? See this example for
reference (Plunker link for testing:
http://plnkr.co/edit/ETkQ3hcjA0so3XkQeuWn?p=preview):
My CustomComponent:
@Component({
selector: "cp", template: '<input class="form-control"
[(ngModel)]="model" (keyup)="showModel()"/>', inputs: ["model"]
})
export class CustomComponent {
public model: any;
showModel(){console.log(this.model);}
}
My AppComponent using the CustomComponent:
@Component({
selector: 'my-app', template: `<h1>AppComponent text: {{text}}</h1><cp
[(model)]="text"><cp>`, directives: [CustomComponent]
})
export class AppComponent {public text = "Init"}
I would expect, that ngModel is bound to 'model' from the CustomComponent
and 'text' from AppComponent. But in reality it is only 2-way bound to
'model' (see console output from CustomComponent vs h1 {{text}} from
AppComponent) and 'text' is only used as a 1-way binding. How can this be
fixed?
An ugly workaround I am currently using is this, but I would like to put
all the model management code in the CustomComponent or better let it
manage by ngModel.
<cp [(model)]="text" (keyup)="text = myCp.model" #myCp></cp>
Thanks for your feedback :-)
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
