Uncheck the checkbox from button click in Angular 7

Question

Uncheck the checkbox from mat-list-option whereas I splice the data from mat-table. The data were listed with checkbox from the database using Angular 7. When selected checkbox items were added in mat-table I have to remove the particular items.

Here I have to uncheck the checked item, when I removed the item from mat-table. click here for image to understand better

<form #ChoicesForm="ngForm" (ngSubmit)="onSubmitLoanTypeCheckList()">
<div>
          <mat-selection-list  #cList >
            <mat-list-option *ngFor="let cLists of loanTypeCheckList" [value]="cLists" [checkboxPosition]="before" id="{{cLists.id}}" (selectionChange)="onSelection($event, cList.selectedOptions.selected)">
              {{cLists.name}}
            </mat-list-option>
          </mat-selection-list>
        </div>    
<button class="btn-margin-top" mat-raised-button type="submit" color="accent" [disabled]="!toogleBool">Add</button>
        <button mat-raised-button type="button" (click)="btnLoanTypeCheckListCancel()">Cancel</button>

</form>

     

export class LoanTypesComponent
{
   loanTypeCheckList: CheckListDto[] = new Array<CheckListDto>();
 selectedOptions : CheckListDto[] = new Array<CheckListDto>();
constructor(){

 this.checkListClient.getListOfCheckList(this.accountId).subscribe(res => {
      this.loanTypeCheckList = res.data;        
    });
}

onSelection(e, v) {
    if (v.length > 0) {
      this.toogleBool = true;      
      this.selectedOptions = new Array<CheckListDto>();
      
      for (let a of v) {        
        this.selectedOptions.push({          
          accountId : a.value.accountId, 
          accountName: a.value.accountName,
          createdDate:a.value.createdDate,
          disabled:a.value.disabled,          
          id:a.value.id.toString(),
          init : a.value.init,
          modifiedDate:a.value.modifiedDate,          
          name:a.value.name,
          toJSON :a.value.toJSON
        });
      }     
    }
    else {
      this.toogleBool = false;
    }    
  }

onSubmitLoanTypeCheckList() {    
this.loanCheckList = new MatTableDataSource<CheckListDto>(this.selectedOptions);    
  }


deleteCheckList(checkList: CheckListDto) {

    const deleteRow = this.loanCheckList.data.find(a=> a.id == checkList.id);
    const index = this.loanCheckList.data.indexOf(deleteRow);   

    if (index !== -1) {
        this.loanCheckList.data.splice(index, 1);        
        this.loanCheckList = new MatTableDataSource<CheckListDto>(this.loanCheckList.data); 
    }  
  }

}

Chris Tapay Chris Tapay · Accepted Answer · 2019-01-31T17:30:08

My suggestion is to use a service to provide communication among components. That way, the Select Checklist component can listen to changes that the Add New Loan Type component emits.

Let's set the basics considering 3 elements (or files). You'll get the idea:

ui.service.ts

private deleteItemSubject: Subject<any> = new Subject<any>();
deleteItem$: Observable<any> = this.deleteItemSubject.asObservable();

deleteItem(id) {
    this.deleteItemSubject.next(id);
}

add-new-loan-type.component.ts

deleteItem(item) {
    // Your logic here
    // ...
    // Use the service to emit this.
    this.uiService.deleteItem(item.id)
}

select-checklist.component.ts

// Call this method at the very beginning (e.g. constructor, ngOnInit)
listenToDeletedItems() {
    this.uiService.deleteItem$.takeUntil(this.destroyed$).subscribe(id => {
        this.unCheckItem(id);
    });
}

Uncheck the checkbox from button click in Angular 7

1 Answers

ui.service.ts

add-new-loan-type.component.ts

select-checklist.component.ts