<menu  *ngFor="let cats of categories">
<h2>{{cats}}</h2>
<div *ngFor="let value of getItems(cats,products)">
<input type="checkbox">
{{value}}
</div>
</menu>

 <article class="box">
 <h2>products</h2>
 <div *ngFor="let item of products  | filter:FabricTypePipe">
{{item.name}} ~
{{item.color}} ~
{{item.size}} ~
{{item.price}} ~
{{item.gener}}
</div>
</article>

getItems(value, array) {
return (array || []).map(function (w) {
  return w[value];
}).filter(function (w, idx, arr) {
  if (typeof w === 'undefined') {
    return false;
  }
  return arr.indexOf(w) === idx;
});

transform(data,cats) {
debugger
var matchesAND = true;
let values = [cats];
let filters = { color: ['red'], size: ['small'] };
Object.getOwnPropertyNames(filters).forEach(function (values) {
  var filter = filters[values];
  if (filter.length === 0) return;
  if (!filter.includes(data[values])) {
    matchesAND = false;
    return;
  }
});
return matchesAND;