Tukukkk

<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{{ i +1 }}" [(ngModel)]="category.selected" value="{{category}}" (click)="check(category, $event)" class="custom-control-input">

    <small class="custom-control-indicator"></small>

    <small class="custom-control-label">{{ category }}</small>

</label>

</li>

</ul>



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

    <span>{{category}}</span>

  </div>

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();

    }

  }



}

export class Categories {

  category_name: string;

  checked: false;

}

<input (change)="getSelected()" type="checkbox"

    name="games" value="{{g.id}}"

    id="{{g.id}}" [(ngModel)]="g.selected"/>



<label class="game-text" for="{{g.id}}">{{g.name}}</label>