checkbox array show item checked in list - Angular 2

I have list of all company roles that can be added to user, and also I have list that I get from user for roles that he currently have. Both i get from service. I want to compare these two lists and roles that exist make checked when I show them in html list.

My html:

<div class="roles-div">
<div style="text-align: center;">
    <label class="label-roles">Select User Roles</label>
</div>
<form #rolesForm="ngForm" (ngSubmit)="submitRole(rolesForm)" >
<div class="flex-column-center">
    <div class="flex-center width90 height300 checkbox-div">
        <div>
            <ul>
                <li *ngFor="let role of context.roles">
                    <input class="roles-li" type="checkbox" [(ngModel)]="role.id" name="role">
                </li>
            </ul>
        </div>
    </div>
    <div class="flex-column-center2 width35">
        <button class="btn-main10" type="submit">Submit</button>
    </div>
</div> 
</form>

My ts:

export class AddRolePopupComponent extends PopupAbstract implements OnInit {

userRoles = [];


constructor( private userService: UserService, private companyService: CompanyService, public dialog: DialogRef<any> ) {

    super( dialog, dialog.context );
}

ngOnInit() {        
    this.userService.getRolesForUser(this.context.id).subscribe(
        response => { this.handleSucess( response ); },
        error => { console.error( error ); },
    );
    }


handleSucess(response) {
        this.userRoles = response;
}

submitRole(rolesForm){
    console.log(rolesForm.value);
}   

}

Any sugestions what should I do to get my existing roles checked. Thanks