vehicle.component.html

      <!-- activity.vehicleId -->
      <mat-form-field appearance="outline" class="full-width">
        <mat-chip-list #vehicleList aria-label="Araç Seç">
          <mat-chip *ngFor="let vehicle of vehicles" [selectable]="selectable" [removable]="removable"
            (removed)="removeVehicle(vehicle)">
            {{ vehicle.plate }}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input placeholder="Araç Ekle..." #vehicleInput (keyup)="vehicleSearch()" [formControl]="vehicleCtrl"
            [matAutocomplete]="vehicleAuto" [matChipInputFor]="vehicleList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur">
        </mat-chip-list>
        <mat-autocomplete #vehicleAuto="matAutocomplete" (optionSelected)="selectedVehicle($event)">
          <mat-option *ngFor="let vehicle of vehicles$ | async" [value]="vehicle">
            {{ vehicle.plate }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

vehicle.component.ts

  getVehicles() {
    this.vehicles$ = this.vehiclesGQL
      .watch({ plate: this.vehicleSearchKey, skip: this.skip, take: this.limit })
      .valueChanges.pipe(map(result => result.data.vehicles));
  }


  // searches
  vehicleSearch() {
    this.vehicleSearchKey = this.vehicleCtrl.value || '';
    console.log(this.vehicleSearchKey);
    this.getVehicles();
  }