Checkbox data binding in Angular 2 and TypeScript

Question

I have HTML view like below where user's roles are checked. I would like to bind table of changed user's roles using actualizeRoles() method. How can I do that?

<md-accordion class="example-headers-align">
        <md-expansion-panel hideToggle="true" *ngFor="let userRole of userRoles">
            <md-expansion-panel-header>
                <md-panel-title>
                    {{userRoles.UserName}}
                </md-panel-title>
                <md-panel-description>
                    {{userRoles.RoleName}}
                </md-panel-description>
            </md-expansion-panel-header>
            <div *ngFor="let role of roles">
                <div>
                    <input type="checkbox" [checked]="userRoles.RoleIds == role.Id">{{r.Name}}
                </div>
            </div>
            <md-action-row>
                <button md-button color="primary" (click)="actualizeRoles()>Approve</button>
            </md-action-row>
        </md-expansion-panel>
    </md-accordion>

This is user's roles model below where RoleIds[] has a table of Ids roles.

export class UserRole {
    UserId: number;

    Name: string;

    RoleName: string;
    RoleIds: number[];
}

Adam A · Accepted Answer · 2017-10-23 12:11:10Z

1

Simple solution:

<input type="checkbox" [(ngModel)]="variable">

You can read more here:

Angular 2 Checkbox Two Way Data Binding

answered Oct 23, 2017 at 12:11

Adam A

1771 silver badge18 bronze badges

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

Collectives™ on Stack Overflow

Checkbox data binding in Angular 2 and TypeScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related