Uncheck checkbox onclick of its lable in Angular 5

Following my previous question: ngFor length in Angular 5

I was able to fix the error in the previous question. Now I have a list of checkboxes in which I want to uncheck the selected checkbox by on its label click. Something like this: https://run.plnkr.co/plunks/5WkoJK/.

Below is my code

categories.component.html

<input [(ngModel)]="searchText" placeholder="search text goes here">
<span class="filter-clear" *ngIf="searchText.length>0" (click)="clearFilter()">X</span>
<ul class="list-unstyled scrollbar">
<li *ngFor="let category of categories| filter : searchText; let i = index">
<label class="custom-control custom-checkbox">
    <input type="checkbox" name="category" id="checkbox" [(ngModel)]="category.selected" value="" (click)="check(category, $event)" class="custom-control-input">
    <small class="custom-control-indicator"></small>
    <small class="custom-control-label"></small>
</label>
</li>
</ul>

  <div (click)="deleteCategory(category)" class="selected-game" *ngFor="let category of myarray" >
    <span></span>
  </div>

categories.component.ts

import { Component, NgModule, OnInit,  Input, Output, EventEmitter } from '@angular/core';
import { Feeds } from '../shared/services/feeds';
import { FeedsService } from '../shared/services/feeds.service';
import { Categories } from '../shared/services/categories';
import { CategoriesService } from '../shared/services/categories.service';
import { MyService } from '../shared/services/my-service.service';
import { Pipe, PipeTransform } from '@angular/core';
import { FilterPipe } from '../shared/pipes/category-type.pipe';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss']
})
export class CategoriesComponent implements OnInit {

  categories: Categories[];

  feeds: Feeds[];

  myarray = [];

  myobj = {
    'categories': this.myarray
  };

  searchText = '';
  selected_count = 0;

  constructor(private categoriesService: CategoriesService, private myService: MyService) {
  }

  ngOnInit() {
    this.getCategories();
  }

  clearFilter() {
    this.searchText = '';
  }

   // Clearing All Selections
   clearSelection() {
    this.searchText = '';
    this.categories =  this.categories.filter( g => {
          g.checked = false;
          return true;
        });
  }

   deleteCategory(category) {
    this.searchText = '';
    const index = this.myarray.indexOf(category);
    this.myarray.splice(index, 1);
    this.categories = this.categories.filter(name => name !== category);
  }

  getCategories(): void {
    this.categoriesService.getCategories().subscribe(categories => this.categories = categories);
   }

   getCategoryFeeds(myobj): void {
    this.categoriesService.getfeedsByCategories(myobj).subscribe( feeds => { this.myService.change(feeds); });
   }


  check(category, event) {
     if (event.target.checked) {
      this.myarray.push(category);
      this.getCategoryFeeds(this.myobj);
    } else if (!event.target.checked) {
      const index = this.myarray.indexOf(category);
      this.myarray.splice(index, 1);
      this.getCategoryFeeds(this.myobj);
    }
    if (!event.target.checked && this.myarray.length === 0) {
      this.myService.loadAll();
    }
  }

}

categories.ts

export class Categories {
  category_name: string;
  checked: false;
}

Once I click on any checkbox It gets added into myarray Array

I am bit confused on the deleteCategory function. When I try to click on the label on the bottom of the checkbox list. Instead of unchecking the checked checkbox it deletes the checkbox itself.

I followed this example: http://www.freakyjolly.com/angular-4-5-typescript-create-filter-list-with-check-boxes-to-select-from-list/

Its a bit different from my code. Help appreciated.