Angular 2 Tour of Heroes: Filter heroes by name

I have followed the Angular 2 tour of Heroes tutorial, and I am currently at this stage:

http://ift.tt/29v7uZ7

I can search in the search bar, and a list of hero name suggestions come up

However, what I want, is a filter bar, where I search, and the hero block automatically gets filtered depending on what is in the filter bar.

For example, in the link I provided, if I type in "Bo" in the search bar, I only want the hero block "Bombasto" to show up on the screen. When I clear the search bar, all the blocks should reappear. Does someone know how to do this?