title: How to unchecked all checked checkbox in angular 6
body: <p>I have a dynamic list of data, and each element is shown as a checkbox. 
  The elements I checked are saved in an array. After I save the array, I want all the checked checkbox to be unchecked when I press a button, but it doesn't work.</p>
  
  <p>I want to unchecked the selected checkbox after I saved the array. Please help me to find a solution. Thanks.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-6-checkbox-unchekall?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">Stackblitz link here</a></p>
  
  <h3>ts file:</h3>
  
  <pre><code>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;
    }
  
  }
  </code></pre>
  
  <h3>html file:</h3>
  
  <pre><code>&lt;h1&gt;Unchek All Roles&lt;/h1&gt;
  
   &lt;div class="form-check" *ngFor="let appUserRole of appUserRoleList"&gt;
  
   &lt;input class="form-check-input" name="{{appUserRole.roleName}}" 
     type="checkbox" id="{{appUserRole.roleName}}" 
     (change)="onChangeRole(appUserRole.roleName, $event)"&gt;
  
   &lt;label class="form-check-label" for="{{appUserRole.roleName}}"&gt;
    {{appUserRole.roleName}}
   &lt;/label&gt; 
  
  &lt;/div&gt;
  &lt;button (change)="checkedEvnt()"&gt;Uncheck All&lt;/button&gt;
  
  &lt;pre&gt;{{ userRoleListTemp | json}}&lt;/pre&gt;
  </code></pre>