CODEWITHSUNDEEP
javascriptangular
casper123
casper123

Reputation: 1766

Custom Component in Angular with ngModel and multiple fields

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?

Upvotes: 2

Views: 2956

Answers (2)

Simplicity&#39;s_Strength
Simplicity&#39;s_Strength

Reputation: 812

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

Upvotes: 7

Eliseo
Eliseo

Reputation: 58039

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

Upvotes: 1

Related Questions