Get custom html attribute values in angular2

Question

I am using Angular 2 to build my application. This is my code so far:

Template

<select class="form-control input-xs" [(ngModel)]="filter.coordinatorId" name="coordinatorId" (ngModelChange)="onCoordinatorChange($event)">                                                              
    <option *ngFor="let coordinator of coordinators; let i = index" [value]="coordinator.id" [selected]="i==0">{{coordinator.name}}</option>                                    
</select>

Component

onCoordinatorChange(coordinatorId: number){
        alert(coordinatorId);
        //business logic
    }

As you can see, I set [value]="coordinator.id" in option so I am getting coordinator.id value in alert, and if I change it to coordinator.name then I will get that value. But here I want to get multiple values like coordinator.id,coordinator.name,coordinator.department etc. So one solution could be using comma separated but that will be ugly and hard to maintain if other parameters come. Do I have any other option to write my function something like:

onCoordinatorChange(coordinatorId: number, name: string, department: string){
            alert(coordinatorId);
            //business logic
}

Stefan Svrkota · Accepted Answer · 2016-11-09 11:32:48Z

2

Use [ngValue] instead of [value] and just set whole object as a value, that way you will pass entire object and you will have access to all its attributes:

<select class="form-control input-xs" [(ngModel)]="filter.coordinator" name="coordinatorId" (ngModelChange)="onCoordinatorChange($event)">                                                              
    <option *ngFor="let coordinator of coordinators; let i = index" [ngValue]="coordinator" [selected]="i==0">{{coordinator.name}}</option>                                    
</select>

answered Nov 9, 2016 at 11:32

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

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

1 Comment

Imad Over a year ago

Both awesome answers came in almost no time, +1. Confused what to accept ;)

Günter Zöchbauer · Accepted Answer · 2016-11-09 11:31:57Z

2

You can use [ngValue] instead of [value] and pass the coordinator instead of coordinator.id

[ngValue]="coordinator"

This would need to be changed to though

[(ngModel)]="filter.coordinator"

answered Nov 9, 2016 at 11:31

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

5 Comments

Imad Over a year ago

Both awesome answers came in almost no time, +1. Confused what to accept ;)

Günter Zöchbauer Over a year ago

Accept Stefans. . . . . .

Stefan Svrkota Over a year ago

Really funny situation, haha! Write post on stackoverflow meta and ask for option to accept two answers. ;-)

Günter Zöchbauer Over a year ago

Way to much hassle. I'm not suffering from lack of reps, so no worries ;-)

Imad Over a year ago

@GünterZöchbauer haha.. yeah you should start answering bounty questions only :D

Collectives™ on Stack Overflow

Get custom html attribute values in angular2

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related