title: How can I filter dropdown list to show certain values at the top of the list?
body: <p>So I have a dropdownlist with list of nationalities and I want to show certain nationalities at the top of the list (since they're the most common ones in that country). How can I do that? </p>
  
  <p>Here's my dropdownlist: </p>
  
  <pre><code>&lt;select [ngModel]="null" formControlName="nationality" required &gt;
              &lt;option value="null" disabled selected&gt;{{'SelectNationality' | translate}}&lt;/option&gt;
              &lt;option *ngFor="let nationality of nationalities"&gt;{{nationality._nationalityKey}}&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>E.g. I want the nationality Japanese and Chinese at the top of the list instead of Afgdan and American which would be the top normally. </p>
  
  <p>How can I filter it so that e.g. the list looks like this: </p>
  
  <pre><code>Chinese, Japanese, Afgan, American. 
  </code></pre>
  
  <p>instead of this: </p>
  
  <pre><code>Afgan, American, Chinese, Japanese 
  </code></pre>
  
  <p>EDIT 1st attempt: </p>
  
  <pre><code>if (this.nationalities.indexOf('Japanese') &gt; 0) {
    this.nationalities.splice(this.nationalities.indexOf('Japanese'), 1);
    this.nationalities.unshift('Japanese');
    }
  
  if (this.nationalities.indexOf('Chinese') &gt; 0) {
    this.nationalities.splice(this.nationalities.indexOf('Chinese'), 1);
    this.nationalities.unshift('Chinese');
    }
  </code></pre>
  
  <p>Unfortunately, this is redundant code and it only works for when I initially initialize an array. If I populate an array with data from the server, it no longer works. Why and how can I make the above code better? </p>