title: Angular 5 CheckBox Filter Data
body: <p>I am trying to filter my data by checkbox</p>
  
  <p>store-sidebar.component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="list-unstyled scrollbar"&gt;
  
    &lt;li *ngFor="let category of categories; let i = index"&gt;
        &lt;label class="custom-control custom-checkbox"&gt;
            &lt;input type="checkbox" name="category" id="checkbox{{ i +1 }}" value="{{category}}"
            (change)="check(category, $event)" class="custom-control-input"&gt;
            &lt;small class="custom-control-indicator"&gt;&lt;/small&gt;
            &lt;small class="custom-control-label"&gt;{{ category }}&lt;/small&gt;
        &lt;/label&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit,  Input, Output, EventEmitter } from '@angular/core';
  import { Categories } from '../shared/services/categories';
  import { Feeds } from '../shared/services/feeds';
  import { CategoriesService } from '../shared/services/categories.service';
  import { FeedsService } from '../shared/services/feeds.service';
  @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
    };
  
    constructor(private categoriesService: CategoriesService, private feedsService: FeedsService) { }
  
    ngOnInit() {
      this.getCategories();
    }
  
  
    getCategories(): void {
      this.categoriesService.getCategories().subscribe(categories =&gt; this.categories = categories);
     }
  
    check(category, event) {
       if (event.target.checked) {
        this.myarray.push(category);
        this.feedsService.getFeedsfeedsByCategories([this.myobj]);
      } else if (!event.target.checked) {
        const index = this.myarray.indexOf(category);
        this.myarray.splice(index, 1);
        this.feedsService.getFeedsfeedsByCategories([this.myobj]);
      }
      console.log(this.myobj);
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>store-feeds.component.html:</p>
  
  <pre><code>&lt;div class="storetabContent" *ngFor="let feed of feeds"&gt;
  &lt;h3&gt;{{ feed.feed_title }}&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>getFeeds(): void {
     this.feedsService.getFeeds().subscribe(feeds =&gt; this.feeds = feeds);
    }</code></p>
  
  <p>I am getting confused here on how to check it, I mean they are in different components and how should I manage the states.</p>
  
  <p>I tried with Pipes but does not work</p>
  
  <p>I am trying to create checkbox filter like this: </p>
  
  <p><a href="http://carlosroso.com/angular2-shop" rel="nofollow noreferrer">http://carlosroso.com/angular2-shop</a></p>
  
  <p><a href="https://plnkr.co/edit/EQR9DHZQY9e1ItRcKL5s?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/EQR9DHZQY9e1ItRcKL5s?p=preview</a></p>