Search pipe in Angular 2

Question

I have mat-card with names on it (rooms) Also I have an input, I would like to make possible to search through the items. Here is my code:

<div id="room-list-container">
  <h1>Room-list-view here</h1>
  <h1>
    This buildingID is
    <b> {{buildingID}}. </b> This data is fetched from url
  </h1>
  <mat-form-field class="demo-full-width">
    <input matInput placeholder="Search" >
  </mat-form-field>
  <mat-card *ngFor="let room of arr">
    <mat-card-content>
      <h3>Room Number: {{room}}</h3>
      <p>Room Freetime: data comes later </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button (click)="test()" color="accent">Check this room</button>
    </mat-card-actions>
  </mat-card>
</div>

So, if user types something in input (as example - number of rooms) - the list changes and the right rooms will be shown.

I guess I need to do it with something like a custom Pipe, I tried a lot examples, but no one works, could you please advice me how could I solve it?