NgModel does not work with custom angular components

[vsavkin]

Fix it

<some-custom-angular-component currency=" [(ng-model)]="dollars">
</some-custom-angular-component>

[vsavkin]

Turns out it is not an issue

[danicomas]

How did you solve this @vsavkin ?

[danicomas]

Other question. Update input type="text" using NgModel doesn't invoke

ngOnChanges(changes) {
debugger;
}

?

[templth]

@danicomas In fact you can leverage bidirectional binding on custom components but you don't need to use ngModel. For this, just define input and output parameters for your field:

@Component({
  selector: 'my-component'
})
export class MyComponent {
  @Input() inputText : string;
  @Output() inputTextChange = new  EventEmitter();
}

With this, you will be able to use the syntax [(inputText)] when using your component:

<my-component [(inputText)]="something"></my-component>

Hope it helps you,
Thierry

[danicomas]

@templth I don't want to have an emit I want to update the ng-model @vsavkin

[zoechi]

@danicomas That sounds defiant ;-) Why do you want to update the ng-model?

[danicomas]

@templth @zoechi I would prefer to do this process:

1. call to WS and populare this.data
2. input text with ng-model=data.name
3. send this resource (this.data) to put WS

As you can see you wouldn't have to do other related process (mapping this.data with your event emitter delegates)

[antonmoiseev]

@danicomas regarding your question on ngOnChanges(). According to the docs it's triggered when an input property is changed via the data binding. Take a look at this example. Both greeting and search properties are used with [(ngModel)] to sync data between the input element and the component's own property. However only greeting triggers ngOnChanges in the ChildComponent since it's passed from the parent component through the property data binding (line 25).

[danicomas]

@antonmoiseev Good answer about binding ngOnChanges. It is a little bit strange because ng-model could be considered a binding. @vsavkin @vicb @pkozlowski-opensource @jeffbcross

Now we will have to solve the ng-model in child components...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}