import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'User table';
  constructor (private httpService: HttpClient) { }
  url: string = 'https://example.com/users.json';
  arrUsers: string [];
  filters: Object = {};

  ngOnInit () {
    this.httpService.get(this.url).subscribe(
      data => {
        this.arrUsers = data as string [];
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );

  }

  checkboxChange(event: any, arg1: any) {
    //this.filters[arg1] = event.target.checked;
    //console.log(this.filters);
}
}

<div>
    <div class="filter-panel">
        <div class="filter-panel__content">

            <div class="filter-panel__content__filter">
                <span class="filter-text">gender:</span>
                <div class="filter-panel__input-box">
                    <div class="filter-panel__checkbox" *ngFor="let user of arrUsers| generatedcheckbox: 'gender' ;">
                        <input type="checkbox" (change)="checkboxChange($event, user.gender)" /> {{user.gender}}
                    </div>
                </div>
            </div>

            <div class="filter-panel__content__filter">
                <span class="filter-text">department:</span>
                <div class="filter-panel__input-box">
                    <div class="filter-panel__checkbox" *ngFor="let user of arrUsers| generatedcheckbox: 'department' ;">
                        <input type="checkbox" (click)="checkboxChange($event, user.department)" /> {{user.department}}
                    </div>
                </div>
            </div>

        </div>
    </div>

    <table class="user-table" cellspacing='0' *ngIf="arrUsers">
        <caption>{{ title }}</caption>
        <tr>
            <th>Имя</th>
              <th>Возраст</th>
                <th>Пол</th>
                  <th>Департамент</th>
                    <th>Адрес</th>
        </tr>


        <tr *ngFor="let user of arrUsers| filterdata: filters: 'gender'">
            <td>{{user.name}}</td>
              <td>{{user.age}}</td>
                <td>{{user.gender}}</td>
                  <td>{{user.department}}</td>
                    <td>{{user.address.city + ', ' + user.address.street}}</td>

        </tr>
    </table>
</div>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'generatedcheckbox'
})
export class GeneratedCheckboxPipe implements PipeTransform {
  transform(items: any[], arg1: string, arg2:string): any[] {
    if (!items) return [];
    if (!arg1) return  items;
    if (arg1 == '' || arg1 == null) return [];

    var seen = {};

    if (arg2) //arg1=adress, arg2=city --> adress.city
        return items.filter((e) => seen.hasOwnProperty(e[arg1][arg2]) ? false : (seen[e[arg1][arg2]] = true) );

    return items.filter((e) => seen.hasOwnProperty(e[arg1]) ? false : (seen[e[arg1]] = true) );

  }

}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterdata'
})
export class FilterdataPipe implements PipeTransform {

  transform(check: any, checked: any, arg1: string, arg2: string): any {
    console.log('checked',checked);
    //...
    return check
  }

}

[
  {
    "id": "d70b5",
    "name": "Name1",
    "age": 18,
    "gender": "male",
    "department": "Back",
    "address": {
      "city": "Moscow",
      "street": "Street 923"
    }
  },
  {
    "id": "573f3",
    "name": "Name2",
    "age": 24,
    "gender": "female",
    "department": "Back",
    "address": {
      "city": "Moscow",
      "street": "Avenue 666"
    }
  },
  {
    "id": "573f3",
    "name": "Name3",
    "age": 29,
    "gender": "female",
    "department": "Front",
    "address": {
      "city": "New-York",
      "street": "Street 68"
    }
  },
  {
    "id": "573f3",
    "name": "Name4",
    "age": 33,
    "gender": "male",
    "department": "Back",
    "address": {
      "city": "Moscow",
      "street": "Street 97"
    }
  }
]