1

I am trying to filter my data by checkbox

store-sidebar.component:

<ul class="list-unstyled scrollbar">

  <li *ngFor="let category of categories; let i = index">
      <label class="custom-control custom-checkbox">
          <input type="checkbox" name="category" id="checkbox{{ i +1 }}" value="{{category}}"
          (change)="check(category, $event)" class="custom-control-input">
          <small class="custom-control-indicator"></small>
          <small class="custom-control-label">{{ category }}</small>
      </label>
  </li>

</ul>

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 => 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);
  }

}

store-feeds.component.html:

<div class="storetabContent" *ngFor="let feed of feeds">
<h3>{{ feed.feed_title }}</h3>
</div>

getFeeds(): void { this.feedsService.getFeeds().subscribe(feeds => this.feeds = feeds); }

I am getting confused here on how to check it, I mean they are in different components and how should I manage the states.

I tried with Pipes but does not work

I am trying to create checkbox filter like this:

http://carlosroso.com/angular2-shop

https://plnkr.co/edit/EQR9DHZQY9e1ItRcKL5s?p=preview

Improve this question
3
  • you need to bind change event of checkbox item like (change)="changeSearch($event,'chk1')". Commented Mar 13, 2018 at 7:33
  • @Vimal Vataliya My filters is in filters component and Feeds in Feeds component they are separate can you please share any plunkr or working example ? And its not search I am trying to filter the data with checkboxes Commented Mar 13, 2018 at 8:23
  • @0mpurdy Can you please help on this Commented Mar 14, 2018 at 19:48

1 Answer 1

Reset to default
0

There are different ways to achieve this. One of them is via service. These are our assumptions:

  1. The sidebar component will only hold the state of the filters and emit an event to the service whenever there's a change in any of the checkboxes. The event payload will be a filter object.
  2. The service will listen to updates in the filter object, filter the data and emit the data in a data$ Observable.
  3. The feed component will subscribe to the data$ observable and update the view accordingly.

So this gets translated to this:

sidebar.component.ts

// Method called from the template when there's a change in a checkbox

onRedCheckboxChange(evt) {
  // your filterObject would look like this:
  // { blue: true, red: false, green: false }
  this.filterObject.red = evt.checked;
  this.myService.filterData(this.filterObject);
}

my-service.service.ts 

import { Subject }  from 'rxjs/Subject';

private data: Item[] = [];

data$: Subject<Item[]> = new Subject();

filterData(filterObject) {
  const filteredData = this.data.filter(item => {
    // filter your data according to the filter object
  });
  this.data$.next(filteredData);
}

feed.component.ts 

ngOnInit() {
  // subscribe to changes in data
  this.myService.data$.subscribe(data => this.feeds = data);
}

The syntax might not be right, but I hope you get the idea of how to communicate two components via service with a filter payload.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I tried the above code and update my question. Here I cannot assign the return data from my feed service to a variable

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.