Фильтрация данных с помощью angular

Я новичок в angular и пытаюсь фильтровать данные. Я создал веб-страницу со списком отелей, но хотел бы отфильтровать их по их звездному рейтингу. Я не знаю, как даже попытаться это сделать. Любая помощь будет принята с благодарностью!

отели.component.ts :

import { Component } from '@angular/core';
import { WebService } from './web.service';



@Component({
  selector: 'hotels',
  templateUrl: './hotels.component.html',
  styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {

    hotel_list: any;
    page: number = 1;

    constructor(public webService: WebService) { }

    ngOnInit() {
        if (sessionStorage['page']) {
          this.page = Number(sessionStorage['page'])
        }
        this.hotel_list = this.webService.getHotels(this.page);
    }
       

Веб-сервисы.ts:

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


@Injectable()
export class WebService {

    private hotelID: any;


    constructor(private http: HttpClient) { }

    getHotels(page: number) { 
        return this.http.get('http://localhost:5000/api/v1.0/hotels?pn=' + page);

    }

отели.components.html:

<div class = "container">
    <div class = "row">
        <div class = "col-sm-12">
            <div *ngFor = "let hotel of hotel_list | async">
                <div class = "card text-white bg-primary mb-3" 
                     style  = "cursor : pointer"
                     [routerLink] = "['/hotels', hotel._id]">
                    <div class = "card-header">
                        {{ hotel.hotel }}
                    </div>
                    <div class = "card-body">
                        This hotel is based in
                        {{ hotel.city }}
                    </div>
                    <div class = "card-footer">
                        {{ hotel.rating }}
                        stars
                    </div>
                </div>
            </div>