Wyfiltrowanie klientów za pomoca przekazanych inputów z innego komponentu.

HomeController :

import { Component, OnInit } from '@angular/core';
import { User } from '../Models/User';
import { UserService } from '../Services/UserServices';
import { Client } from '../Models/Client';
import { ClientService } from '../Services/ClientService';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  currentUser$: User;
  currentClientList : Client[];
  currentSegments : string[];
  checkedSegment: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
  currentPH : string[];
  checkedPH:string[]= [];

  constructor(private user: UserService,private client: ClientService) {

   }

  ngOnInit(): void {
    this.setCurrentUser();
    this.getCurrentUser();
    this.getClients();

  }


  setCurrentUser(): void{
  const user: User = JSON.parse(localStorage.getItem('user'));
  this.user.setCurrentUser(user);
  }

  getCurrentUser(): void {
    // this.currentUser$ = JSON.parse(localStorage.getItem('user'));
     this.user.currentUser$.subscribe((response) => {
      this.currentUser$ = response;
    });
  }

  getClients(): void {
    this.client.getClients()
    .subscribe((response) => {
        this.currentClientList = response;
        this.currentPH = this.removeDuplicatePH(this.currentClientList);
        this.onMapNotify(this.currentClientList);
    });
  }


  removeDuplicateSegment(cli: Client[]) {
    // tslint:disable-next-line: no-shadowed-variable
    const clients = cli.map(clients => clients.segment).sort();
    return [...new Set(clients)];
  }

  removeDuplicatePH(cli: Client[]) {
    // tslint:disable-next-line: no-shadowed-variable
    const clients = cli.map(clients => clients.ph).sort();
    return [...new Set(clients)];
  }

  onMapNotify(clients: Client[]) : void{
    this.currentClientList = clients;
    this.currentSegments = this.removeDuplicateSegment(clients);
    this.currentPH = this.removeDuplicatePH(clients);
  }

  recieveCheckedSegment(e) {
    console.log(e);
    if (e.isChecked === true) {
      this.checkedSegment.push(e.segment);
    } else {
      let i = this.checkedSegment.indexOf(e.segment);
      if (i != -1) {
        this.checkedSegment.splice(i, 1);
      }
    }
    console.log(this.checkedSegment);
    this.filterClients();
  }

  filterClients() {

      console.log("wyfiltrowane przez " + this.checkedSegment);

      let currSegmentChecked = this.checkedSegment;
      const tempClient = this.currentClientList.map(x => x.segment).filter(function(segment){
        return segment.indexOf(segment) >= 0 ;
      },currSegmentChecked)
      console.log(this.currentClientList.map(x => x.segment));
  }




}

<div class="wrapper">
  <app-header></app-header>
  <div class="mainapp">
    <app-map class="map" [clientList]= "currentClientList" *ngIf="currentUser$" (klienci)="onMapNotify($event)"></app-map>
    <app-aside [Segmenty]= "currentSegments" [PH]= "currentPH" class="aside" *ngIf="currentUser$" (checkedPH)= "recieveCheckedPH($event)"
      (checkedSegment)= "recieveCheckedSegment($event)"> {{checkedSegment}}  {{checkedPH}}
    </app-aside>
  </div>


</div>

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-aside',
  templateUrl: './aside.component.html',
  styleUrls: ['./aside.component.css']
})
export class AsideComponent implements OnInit {

 @Input() Segmenty;
 @Output() checkedSegment = new EventEmitter<{}>();
 @Input() PH;
 @Output() checkedPH = new EventEmitter<{}>();


  constructor() {
   }

  ngOnInit(): void {

  }

  emitCheckedValue(event, segment) {
    // console.log(event.srcElement.checked);
    this.checkedSegment.emit({
      isChecked: event.srcElement.checked,
      segment: segment
    });
  }

  emitCheckedPH(event, ph) {
    // console.log(event.srcElement.checked);
    this.checkedPH.emit({
      isChecked: event.srcElement.checked,
      ph : ph
    });
  }


}

<div class="box">
  <div class="segment">
    <div *ngFor ="let segment of Segmenty; let i = index" >
      <input type="checkbox" checked="true" (change)="emitCheckedValue($event,segment)">
      <span>{{segment}}</span>
    </div>
  </div>
</div>