Помогите правильно доделать пожалуйста. .Нужно в Angular доделать поиск по сайту! скажите что не так что доделать надо.?

Чтоб при вводе в поисковую строку делался запрос на серве. данные обрабатывались и если совпадения есть результат в виде: фото, название товара и ссылка на страницу с товаром на сайте, вывести на страницу поиска

Вот файлы и код(недоработанные):

search.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GoodsInterfaces } from 'src/app/core/interfaces/goods.interfaces';
import { GoodsService } from 'src/app/core/services/goods.service';

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

  GoodsList: Array<GoodsInterfaces>;
  GoodsData: GoodsInterfaces;

  public search: string;

  constructor(
    private GoodsService: GoodsService
  ){}

  ngOnInit(): void {
    this.getGoods()
  }

  private getGoods(): void {
    this.GoodsService.getGoods()
      .subscribe(data => {
        console.log(data)
        this.GoodsList = data;
      },
        error => console.error(error)
      )
  }

}

Вот фильтр поиска:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterBySearch'
})
export class FilterBySearchPipe implements PipeTransform {

  transform(data: any, search: string): any {
    console.log('pipe', search)
    if (!search) {
      return data
    }
    return data.filter(el => {
      return el.title.toLowerCase().indexOf(search.toLocaleLowerCase()) > -1
    });
  }

}

Вот сервис:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { GoodsInterfaces } from 'src/app/core/interfaces/goods.interfaces';

@Injectable({
  providedIn: 'root'
})
export class GoodsService {
  private url = 'http://localhost:3000/goods';

  constructor(
    private http: HttpClient
  ) { }

  getGoods(): Observable<Array<GoodsInterfaces>> {
    return this.http.get<Array<GoodsInterfaces>>(`${this.url}`)
  }
}

Вот html самой страницы поиcка:

<div class="row justify-content-between">
    <form class="col">
      <div class="form-group">
        <input
          type="text"
          class="form-control"
          name="search"
          placeholder="Поиск..."
          autocomplete="off"
          [(ngModel)]="search"
          />
      </div>
    </form>
  </div>

  <ul
    class="p-0"
    *ngIf='GoodsList'>

    <div
      *ngFor="let item of GoodsList | filterBySearch:search">
</div>

  </ul>
  <div
    class="text-center"
    *ngIf="!GoodsList||GoodsList.length==0">
    {{(!GoodsList)?  "no data": "GoodsList is empty"}}
  </div>

Пример DB.json

{
  "goods": [
    {
      "id": 1,
      "title": "Xcelens 3",
      "picture": "https://randomuser.me/api/portraits/men/15.jpg"
    },
    {
      "id": 2,
      "title": "Xcelens 4",
      "picture": "https://randomuser.me/api/portraits/men/15.jpg"
    },
    {
      "id": 3,
      "title": "Genyal",
      "picture": "https://randomuser.me/api/portraits/men/15.jpg"
    },
    {
      "id": 4,
      "title": "Genyal blue",
      "picture": "https://randomuser.me/api/portraits/men/15.jpg"
    }
  ]
}