title: Maintain order when dynamically adding components to page with ngFor
body: <p>In a parent container, I have a list of strings. This list of strings is used in the template to generate child components. A bit simplified, it looks like this:</p>
  
  <p><em>Component</em></p>
  
  <pre class="lang-ts prettyprint-override"><code>export class MyComponent {
      private queries = [];
      private currentQuery: string = 'SELECT * FROM something';
  
      runQuery() {
          this.queries.unshift(this.currentQuery);
      }
  }
  </code></pre>
  
  <p><em>Template</em></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;textarea [(ngModel)]="currentQuery"&gt;&lt;/textarea&gt;
      &lt;a (click)="runQuery()"&gt;Click Me&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div *ngFor="let query of queries"&gt;
      &lt;my-child-container [query]=query&gt;&lt;/my-child-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works, I can dynamically generate my child components on the page. But it's not maintaining the order I want. You'll notice I used <code>unshift()</code>, that's because I want new queries to appear <em>above</em> old queries on my page layout. Despite the use of <code>unshift()</code>, new queries are appearing below the old queries. It appears that <code>ngFor</code> ignores the order of the list?</p>
  
  <p>To explain a bit clearer, this is how the new child components are currently appearing on the page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;I'm the 1st query you ran&lt;/div&gt;
  &lt;div&gt;I'm the 2nd query you ran&lt;/div&gt;
  &lt;div&gt;I'm the 3rd query you ran&lt;/div&gt;
  </code></pre>
  
  <p>What I would like is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;I'm the 3rd query you ran&lt;/div&gt;
  &lt;div&gt;I'm the 2nd query you ran&lt;/div&gt;
  &lt;div&gt;I'm the 1st query you ran&lt;/div&gt;
  </code></pre>
  
  <p>How can I make Angular2 respect the order of the list? Or am I taking the wrong approach to this?</p>