2

So lets say I want a create a custom component in Angular 2+ for the following class

public class user {
    name: string;
    id: number;
    address: string;
}

I've created a custom component

<input [(ngModel)]="name" />
<input [(ngModel)]="id" />
<input [(ngModel)]="address" />

I've added this custom component into my main page 

<user-component></user-component>

What I want to do now is pass the User class as ngModel inside my custom component and bind it with public user:User variable in my main page class. Something like this 

<user-component [(ngModel)]="user"></user-component>

I've found few examples of using ControlValueAccessor, NG_VALUE_ACCESSOR but all these examples work with single component like one text input. Is there a way to make it work for multiple inputs inside the custom component as well?

casper123
  • 1,736
  • 4
  • 21
  • 39

2 Answers2

7

The way to achieve this is to use @Input on the UserComponent

export class UserComponent {
  @Input() user: User;
}

Then binding to the input you declared in your parent template 

<user-component [user]="user"></user-component>

Now this is only one way, input to the UserComponent,

To make it two ways like ngModel works you would need to add the output EventEmiter As follows

export class UserComponent {
  @Input() user: User;
  @Output('userChange') emitter: EventEmitter<User> = new EventEmitter<User>();
}

Note that the userChange keyword is important here to make it work.

Only then you would be able to write the two way binding

<user-component [(user)]="user"></user-component>

Adding a bit of reading docs here angular.io/guide/template-syntax#property-binding-property

Also with just a google search away, i was able to find this also good SO answer on the same topic custom-input-and-output-on-same-name-in-angular2-2-way-binding

Simplicity's_Strength
  • 793
  • 7
  • 18
  • As everyone is pointing out, a nice life saver would be to use https://angular.io/guide/reactive-forms#grouping-form-controls a FormGroup with FormControls inside – Simplicity's_Strength Sep 11 '19 at 07:36
  • If I use reactive forms, will I get two way data binding ? – casper123 Sep 11 '19 at 07:39
  • 1
    Reactive forms help to manage values and validity of the inputs. For example you can subscribe to a FormControls change events. You still need the input outputs on the component to notify the parent component. – Simplicity's_Strength Sep 11 '19 at 07:40
  • @Simplicity's_Strength, is an object, it's NOT necesary `@Output`, see e.g. https://stackblitz.com/edit/angular-jvvmjg?file=src%2Fapp%2Fapp.component.html – Eliseo Sep 11 '19 at 07:49
  • @Eliseo good point, this two way binding example is not needed in case you can bind to the Object directy. Your answer and stackblitz are valids for OPs initial need. – Simplicity's_Strength Sep 11 '19 at 07:54
1

as you has an object you can simple pass the object as @Input and 

<user-component [user]="user"></user-component>

And your child

@Input() user:any

<input [(ngModel)]="user.name" />
<input [(ngModel)]="user.id" />
<input [(ngModel)]="user.address" />

NOTE: Really I love ReactiveForms, cheer up to use these

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Yes I can pass the object, but once user updates the input fields inside custom component, will I get updated filed values in main component ? – casper123 Sep 11 '19 at 07:33