Использование imageFilter в другом файле

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hello';
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ImageService } from "./shared/image.service";
import { ImageFilterPipe } from "./shared/filter.pipe";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { GalleryComponent } from './gallery/gallery.component';
import { ImageComponent } from './image/image.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    GalleryComponent,
    ImageComponent,
    ImageFilterPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [ImageService, ImageFilterPipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div class="container">
  <app-navbar></app-navbar>
  <app-gallery></app-gallery>
</div>

import {Injectable} from "@angular/core";

@Injectable(

)

export class ImageService{

  visibleImage = [];

  getImages()
  {
     return this.visibleImage=IMAGES.slice(0);
  }

}

const IMAGES=[
  {
    "id" : 1, "category": "boats", "caption": "View in the boat",  "url": "assets/img/1.jpg"
  },
  {
    "id" : 2, "category": "library", "caption": "View in the library",  "url": "assets/img/2.jpg"
  },
  {
    "id" : 3, "category": "library", "caption": "View in the library2",  "url": "assets/img/3.jpg"
  },
  {
    "id" : 4, "category": "boats", "caption": "View in the boat2",  "url": "assets/img/4.jpg"
  },
  {
    "id" : 5, "category": "boats", "caption": "View in the boat3",  "url": "assets/img/5.jpg"
  },
  {
    "id" : 6, "category": "boats", "caption": "View in the boat4",  "url": "assets/img/6.jpg"
  },
  {
    "id" : 7, "category": "boats", "caption": "View in the boat5",  "url": "assets/img/7.jpg"
  },
  {
    "id" : 8, "category": "library", "caption": "View in the library3",  "url": "assets/img/8.jpg"
  },
  {
    "id" : 9, "category": "camping", "caption": "View in the camping",  "url": "assets/img/9.jpg"
  },
  {
    "id" : 10, "category": "camping", "caption": "View in the camping2",  "url": "assets/img/10.jpg"
  },
  {
    "id" : 11, "category": "camping", "caption": "View in the camping3",  "url": "assets/img/11.jpg"
  },
  {
    "id" : 12, "category": "camping", "caption": "View in the camping4",  "url": "assets/img/12.jpg"
  },
  {
    "id" : 13, "category": "library", "caption": "View in the library4",  "url": "assets/img/13.jpg"
  },
  {
    "id" : 14, "category": "library", "caption": "View in the library5",  "url": "assets/img/14.jpg"
  },
  {
    "id" : 15, "category": "library", "caption": "View in the library6",  "url": "assets/img/15.jpg"
  },
  {
    "id" : 16, "category": "library", "caption": "View in the library7",  "url": "assets/img/16.jpg"
  },
  {
    "id" : 17, "category": "boats", "caption": "View in the boat6",  "url": "assets/img/17.jpg"
  },
  {
    "id" : 18, "category": "boats", "caption": "View in the boat7",  "url": "assets/img/18.jpg"
  },
  {
    "id" : 19, "category": "boats", "caption": "View in the boat8",  "url": "assets/img/19.jpg"
  },
  {
    "id" : 20, "category": "camping", "caption": "View in the camping5",  "url": "assets/img/20.jpg"
  }
]

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

@Pipe({ name : 'imageFilter' })

export class ImageFilterPipe implements PipeTransform{
  transform(items: any[], criteria: string): any {
    if (criteria==='all') {
      return items;
    }
    else {
      return items.filter(item => item.category === criteria);
    }

  }

}

import { Component, OnInit } from '@angular/core';
import { ImageService } from "../shared/image.service";

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

  images: any[] = [];

  filterBy? : string ='all';

  constructor(private imageService: ImageService) {
    this.images=this.imageService.getImages();
    console.log(this.images);
  }

  ngOnInit(): void {
  }

}

<div class="row">
  <div class="col-md-12">
    <h2>Photos</h2>
  </div>

  <div class="col-md-12">
    <button class="btn btn-lg btn-info" [class.active]="filterBy === 'all'" (click)="filterBy = 'all'">All</button>
    <button class="btn btn-lg btn-info" [class.active]="filterBy === 'boats'" (click)="filterBy = 'boats'">Boats</button>
    <button class="btn btn-lg btn-info" [class.active]="filterBy === 'camping'" (click)="filterBy = 'camping'">Camping</button>
    <button class="btn btn-lg btn-info" [class.active]="filterBy === 'library'" (click)="filterBy = 'library'">Library</button>
  </div>

  <ul id="thumbnailList">
    <li *ngFor="let image of (images | imageFilter: filterBy)">
      <a href="#">
        <img src="{{ image.url }}" class="tn" width="200" height="160">
      </a>
    </li>
  </ul>
</div>

ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  width: 1200px;
  margin: 20px auto;
  list-style-type: none;
}

.tn{
  margin: 6px 6px;
  border: 4px solid #eee;
  box-shadow: #555 1px 1px 8px 1px;
  cursor: pointer;
}