angular 2 when adding new item to list, custom pipe not reordering list

I implemented a orderby pipe that works fine when the DOM loads. But when I add a new item to the list, my pipe is not being activated and the new item that has been added to the list, is not order - but added to the last place in the list.

The pipe is only executed by Angular if the value changes (or the parameter fo a pipe if there are any)

There are no parameters in your example and the value doesn't change. Angulars change detection doesn't check the content of an array, only if the reference changed (to a different array instance, same for objects btw.)

What you can do

make the pipe non-pure

@Pipe({
name: "LeagueFilter",
pure: false
})

This way the pipe will be executed with every change detection run, which can become expensive. The pipe should take care to not do unnecessary work by for example caching the result and use IterableDiffer (like used in NgFor) to check the array for changes explicitly.

create a copy of the array after the modification

this.teams.push(this.newTeam);
this.teams = this.teams.slice();

This also can become expensive if the array is large and changes happen often