I'm looking for a way to filter an unordered list using an input field with angular.

I have a component which builds an unordered list on page load with data fetched from a JSON file, using the `*ngFor` directive, it does so by using a service to get the actual data. Here's the code for the component in question:

`operation-catalogue.component.ts`:

```
import { Component, OnInit, Input } from '@angular/core';
import { OperationService } from "./operation.service";

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

  operationCatalogue = [];

  constructor(private operationService: OperationService) { }

  ngOnInit() {
      //Get the items to put in the list...
      this.operationCatalogue = this.operationService.getOperations();
  }
}

```

`operation-catalogue.component.html`:

```
<div id="search-box-div">
    <div id="search-field" class="top-div">
        <input #input type="text" placeholder="Filter">
    </div>
</div>
<ul>
    <!-- generate list, name only -->
    <li *ngFor="let operation of operationCatalogue">
        <label>{{operation.name}}</label>
    </li>
</ul>

```

I've left out the service on purpose because it works as intended and not needed for this example.

What I want to do is be able to filter the list that is generated using the html `input` element.

I've tried to have a look at past questions here on stack overflow but they all seem to be outdated and using methods that Angular2 no longer supports. 

How can I accomplish this goal with a modern method?