Unraveling Angular 2 book, Chapter 1, Example 5

You have a pure pipe so

its method transform will be executed only when it detects a pure change to the input value.

For your case

*ngFor="let dive of dives | contentFilter:searchBox.value"

the input value will be dives and searchBox.value

According to the angular2 guide on pipes:

A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

• When a dive is added, the array reference (dives) isn't changed – hence transform method is not executed.
• When something is typed into the filter input, searchBox.value does change - hence transform is executed.

So one of possibles solutions is to have always a new reference array each time a div is added:

Just replace:

this.dives.push(this._stockDives[this._index++]);

with:

this.dives = this.dives.concat(this._stockDives[this._index++]);

or:

this.dives = [...this.dives, this._stockDives[this._index++]];

Second way to do it working is use impure pipe:

@Pipe({name: 'contentFilter', pure: false })