How to unchecked all checked checkbox in angular 6

I have a dynamic list data which have shown in checkbox. I click on multiple checkbox then multiple data saved in to an array and i saved that. After save the array the checkbox will be unchecked but it can't. I want to unchecked the selected checkbox after save the array. Please help me to find solution. Thanks.

stackblitz link here

// ts file

export class AppComponent  {
 userRoleListTemp: any = [];
 userRoleListToSave: any = [];
 checkedInfo: any;

 appUserRoleList: any = [
    {id: '1', roleName: 'SETUP_ROLE'},
    {id: '2', roleName: 'ENTRY_ROLE'},
    {id: '3', roleName: 'SEATPLAN_ROLE'},
    {id: '4', roleName: 'MARKSENTRY_ROLE'},
    {id: '5', roleName: 'APPLICANT_ROLE'}
 ];

 constructor() {}

 onChangeRole(userRole: string, isChecked) {
    this.checkedInfo = isChecked;
    if (isChecked.target.checked) {
        this.userRoleListTemp.push(userRole);
    } else {
        let index = this.userRoleListTemp.indexOf(userRole);
        this.userRoleListTemp.splice(index, 1);
    }
  }

  checkedEvnt() {
    this.checkedInfo.target.checked = false;
  }

}

// html file

<h1>Unchek All Roles</h1>

 <div class="form-check" *ngFor="let appUserRole of appUserRoleList">

 <input class="form-check-input" name="" 
   type="checkbox" id="" 
   (change)="onChangeRole(appUserRole.roleName, $event)">

 <label class="form-check-label" for="">
  
 </label> 

</div>
<button (change)="checkedEvnt()">Uncheck All</button>

<pre></pre>