How to create a dynamic channel angular2

Question

I have the following user interface buttons:
[Show All] [Category 1] [Category 2]

I would like to use filterByfrom ngx-pipes( https://github.com/danrevah/ngx-pipes ) to filter my data.

Usage: array | filterBy: [prop, nested.prop, ...]: search: [strict | optional]

In the docs, their example: {{ users | filterBy: ['work.company']: 'Bar Tech' }}

• Instead of having “Bar Tech” be a “hard-coded” filter, I would like to assign the variable currentCategory instead - how do I do this? Am I just replacing Bar Techwith currentCategory?

• How to update a channel with the click of a button? I understand that I can bind the event (click), however I am not quite sure how to update currentCategory, although (click), which will make the filter filter again.

In other words: using buttons, I would like to update the displayed data based on the matching property (the value of the button should be in the object)

Answer 1

1st. : Yes.

2nd. : you must import pipeinside yours componentand call .transform()on the button (click).

import { FilterByPipe } from 'ngx-pipes/src/app/pipes/array/filter-by';

@Component({
  // ...
  providers: [FilterByPipe]
})
export class AppComponent {

  filteredArr: any[]; // your correct type   

  constructor(private readonly filterByPipe: FilterByPipe) {
    // ...
    this.filteredArr = this.users.slice(); // clone array by value (not by reference)
  }

  onClickBtn() {
    this.filteredArr = this.filterByPipe.transform(
      this.users, 
      'work.company',
      this.currentCategory
    );
  }
}

Remember to change the original array in template, you should use:

*ngFor="let <variable> of filteredArr"...