title: Why *ngFor in Angular shows the new object first from the array of objects which is having .subscribe() method on in Ionic 3
body: <p>I am new to Ionic 3 &amp; Angular and ran into an issue with *ngFor and .subscribe() method. Please forgive me if it is an easy question. I tried to figure out the behaviour of  http.get(..).map(..).<strong>subscribe()</strong> function when used along with *ngFor to maintain an array of objects and show the records to user using *ngFor on the .html template file but unable to know <strong>*ngFor</strong>'s odd behaviour.</p>
  
  <p>In my Ionic 3 App, I am getting the data using an API and storing it inside a component variable called <strong>"users"</strong> which is declared as below in component .ts file -</p>
  
  <pre><code>users: Array&lt;any&gt;;
  </code></pre>
  
  <p>I have below component function which gives me data for this users array - </p>
  
  <pre><code>addUser(count: number) {
    this.http.get('https://randomuser.me/api/?results=' + count)
    .map(data =&gt; data.json().results)
    .subscribe(result =&gt; {
      for (let val of result) {
        this.users.push(val);
      }
    })
  }
  </code></pre>
  
  <p>Initially, I get data for 10 users from the API using above component function by simply calling it inside my ngAfterViewInit() function like - </p>
  
  <pre><code>this.addUser(10); 
  </code></pre>
  
  <p>This gives me 10 user record objects inside my <strong>users</strong> array which I show to the user using something like below in the view .html file -</p>
  
  <pre><code>&lt;ion-card *ngFor="let user of users"&gt;
    {{user.email}}
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>At this time *ngFor puts the last array element at first in the view and shows the records in the descending order as the elements in the array starting from index 9 to 0.(LIFO order)</p>
  
  <p>Now I start popping the last element from this users array using <code>users.pop();</code> and push another element at the beginning at index 0 by shifting current elements using <code>users.unshift(..)</code> in below function and calling it as <code>addNewUser(1);</code> -</p>
  
  <pre><code>addNewUser(count: number) {
        this.http.get('https://randomuser.me/api/?results=' + count)
        .map(data =&gt; data.json().results)
        .subscribe(result =&gt; {
          for (let val of result) {
            this.users.unshift(val);
          }
        })
      }
  </code></pre>
  
  <p>At this moment, if we consider the first array which had 10 elements, the last object at index 9 had been removed and another element at index 0 has been added making the previous elements on index 0-8 to shift to index 1-9.</p>
  
  <p>On doing so, my view gets updated which has *ngFor and surprisingly this time it shows the first element at first place which is actually on index 0 which is the one I recently put. This is opposite to the order earlier followed by *ngFor to render elements on the screen.</p>
  
  <p>Why *ngFor in Ionic 3 view shows the recently inserted object element first from the array of objects which is dependent on the subscribe method .subscribe() method. I am really confused about this.</p>
  
  <p>I really need to clear the concept of *ngFor and subscribe(). Please help me.</p>
  
  <p>Note : The API mentioned above is publicly accessible for testing and you may call it to check the response structure if required.
  Pasting a sample API response below on calling <code>https://randomuser.me/api/?results=1</code> -</p>
  
  <pre><code>{
      "results": [
          {
              "gender": "male",
              "name": {
                  "title": "mr",
                  "first": "daniel",
                  "last": "stoll"
              },
              "location": {
                  "street": "9719 tannenweg",
                  "city": "cottbus/chosebuz",
                  "state": "bremen",
                  "postcode": 81443
              },
              "email": "daniel.stoll@example.com",
              "login": {
                  "username": "greenleopard994",
                  "password": "chat",
                  "salt": "OUjisBdQ",
                  "md5": "8148d51998f3fef835a5f3979218c181",
                  "sha1": "131ae09d045b345efe36a330bf17a450b76f7de3",
                  "sha256": "94c3a362b5f516d0fb1d4e9dbb632d32d57b8886d5cc7bf0d5cedc99e7d55219"
              },
              "dob": "1957-04-26 22:07:14",
              "registered": "2002-04-29 10:57:34",
              "phone": "0556-4348870",
              "cell": "0172-5116200",
              "id": {
                  "name": "",
                  "value": null
              },
              "picture": {
                  "large": "https://randomuser.me/api/portraits/men/14.jpg",
                  "medium": "https://randomuser.me/api/portraits/med/men/14.jpg",
                  "thumbnail": "https://randomuser.me/api/portraits/thumb/men/14.jpg"
              },
              "nat": "DE"
          }
      ],
      "info": {
          "seed": "8fd4afe85884c767",
          "results": 1,
          "page": 1,
          "version": "1.1"
      }
  }
  </code></pre>
  
  <p>Refer <a href="https://stackblitz.com/edit/angular-ijzrss?file=app%2Fapp.component.ts" rel="nofollow noreferrer">this example</a> showing my issue.</p>