user-gallery.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { CarsService } from '../services/cars.service';
import { pipe } from 'rxjs';
import { filter, tap } from 'rxjs/operators';
import { Car } from '../models/car';

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

  url = 'assets/';
  cars;
  subscriptionCars;
  @Input() userId: number;


  constructor(private carsService:CarsService) { }

  ngOnInit() {
    console.log('ngOnInit');
    this.subscriptionCars = this.carsService.getCars()
      .pipe(
        tap( cars => console.table(cars)),
        filter( car => car.userId == this.userId)
      ).subscribe({
        next:(cars) => {
          console.log('SUBSCRIPTION');
          console.table(cars);
          //this.cars = data.filter( car => car['userId'] == this.userId); <- this code works without pipes
          this.cars =  cars;
        },
        error:error => {
          console.error(error);
        }
      });
  }

  ngOnDestroy(){
    if(this.subscriptionCars)
      this.subscriptionCars.unsubscribe();
  }

}