[Angular2] Fail to apply bootstrap on checkbox with Angular2

Problem
According to the example in w3schools, http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

If the checkbox is static, it will not have this problem. But if the checkboxes generate dynamically, using *ngFor, the checkbox square is missing


The code snippet is as bellows:

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="row" *ngIf="roles"> <div> <label>角色</label> </div> <div *ngFor="let role of roles" style="display: inline-block"> <div class="checkbox"> <label style="padding-right:10px; padding-left:10px" > <input type="checkbox" [(ngModel)]="role.isSelected" (change)="checkRole(role)"> {{ role.name }} </label> </div> </div> </div>

How-To
It seems that if the checkbox generate dynamically, it will lack of some html tags to assign class for unknown reasons. Therefore, you need to add these span tag manually (line 9).  

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="row" *ngIf="roles"> <div> <label>角色</label> </div> <div *ngFor="let role of roles" style="display: inline-block"> <div class="checkbox"> <label style="padding-right:10px; padding-left:10px" > <input type="checkbox" [(ngModel)]="role.isSelected" (change)="checkRole(role)"> <span class="checkbox-material"><span class="check"></span></span> {{ role.name }} </label> </div> </div> </div>