(*ngFor) Performance issues when getting a long list of items

I am not sure if this is angular 2 or ionic 2 related, but when I make a long list of a certain array (let's say over a hundred but I am unsure) there is a huge performance issue when I 'run' it or 'serve' on the browser.

I used a service in order to get mock data of a arrays (JSON formatted) of over 100 ingredients (unsure of the tolal number but there is a lot) and put it on the ionic @Page iterating through the array using ngFor. When I noticed the issue I even put the array on the same component and while it ran a little better there was still an issue of performance when iterating through the array.

What I mean by performance issues is after the list is downloaded the ion-icon don't appear on the button, the button (click) don't do anything, it takes forever to scroll down on device, even though it gives me a list of items it takes forever to get the list.name and after everything is downloaded and try to get to the next page sometimes I might get the White Screen of death for no reason. etc...just imagine playing WOW using a computer with Intel Celeron core duo. That slow.

I tried the same thing (minus ionic2) on a webpage I am doing and it iterated just fine.

So it was designed this way for test purposes:

1. mock-data with the array
2. SERVICE (get mock-data by using a Promise.resolve)
3. the COMPONENT will get the data from the service.
4. iterate using ngFor

==Performance bad===

Then I tested doing this:

1. make a local variable with the data inside the component
2. iterate using ngFor

==Performance a little better but still horrible==

Now to clarify; I didn't expect to get the data that quick, what I didn't expect for it to be so slow when I tried to do things after downloading the data..like scrolling down to see all my items are there etc...

EDIT:
Completely forgot that I had it on github...

Here is the html:

here is the ts:

EDIT:Just noticed the github quote functionality...nice implementation on the forum #ionic!!!