title: Checkbox data binding in Angular 2 and TypeScript
body: <p>I have HTML view like below where user's roles are checked. I would like to bind table of changed user's roles using <code>actualizeRoles()</code> method. How can I do that?      </p>
  
  <pre><code>&lt;md-accordion class="example-headers-align"&gt;
          &lt;md-expansion-panel hideToggle="true" *ngFor="let userRole of userRoles"&gt;
              &lt;md-expansion-panel-header&gt;
                  &lt;md-panel-title&gt;
                      {{userRoles.UserName}}
                  &lt;/md-panel-title&gt;
                  &lt;md-panel-description&gt;
                      {{userRoles.RoleName}}
                  &lt;/md-panel-description&gt;
              &lt;/md-expansion-panel-header&gt;
              &lt;div *ngFor="let role of roles"&gt;
                  &lt;div&gt;
                      &lt;input type="checkbox" [checked]="userRoles.RoleIds == role.Id"&gt;{{r.Name}}
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;md-action-row&gt;
                  &lt;button md-button color="primary" (click)="actualizeRoles()&gt;Approve&lt;/button&gt;
              &lt;/md-action-row&gt;
          &lt;/md-expansion-panel&gt;
      &lt;/md-accordion&gt;
  </code></pre>
  
  <p>This is user's roles model below where <code>RoleIds[]</code> has a table of <code>Ids</code> roles.</p>
  
  <pre><code>export class UserRole {
      UserId: number;
  
      Name: string;
  
      RoleName: string;
      RoleIds: number[];
  }
  </code></pre>