Angular 5 Reactive Forms - Checkbox array mat-selection-list simple sample

angular5-checkbox-array-reactive-forms-handler.html

 <div class="col-md-6" *ngIf="notifications  && notifications.length > 0">
    <label class="example-margin">Notifications to send:</label>
    <mat-selection-list [(ngModel)]="selectedNotifications" [ngModelOptions]="{standalone: true}">
        <mat-list-option *ngFor="let n of notifications" [checkboxPosition]="before" [value]="n.id+'_'+n.description">
            <mat-icon matListIcon>notifications</mat-icon>
            {{n.description}}
        </mat-list-option>
    </mat-selection-list>
</div>

angular5-checkbox-array-reactive-forms-handler.ts

...
this.yourService.getnotifications().subscribe(response => {
    this.notifications = ...;
});
...
createForm() {
     this.form = this.fb.group({
       ...
        notification: this.fb.array([])
    });
}
...


addContact() {
      this.updateSelected(this.selectedNotifications,'notification');
  ...
}


updateSelected(selected, key) {
    let chkArray = <FormArray>this.form.get(key);
    chkArray = this.fb.array([]);
    selected.forEach(element => {
        let item = element.split('_');
        chkArray.push(new FormControl({ id: item[0], description: item[1] }));
    });              
}

revert() {
    this.form.reset();
    this.selectedContactTypes = null;
    this.selectedNotifications = null;
}