title: Angular - How to add dividers in between select options using ngFor?
body: <p>I'm using a ngFor to populate my select with options.</p>
  
  <pre><code>&lt;select&gt;
    &lt;option *ngFor='let item of items; let i = index, [value]='item.name',)&gt; {{ item.label }} &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I want to add a divider after a certain option. So something like this</p>
  
  <pre><code>Item1
  Item 2
  -- Divider --
  Item 3
  </code></pre>
  
  <p>I've gotten as far as displaying the divider by using the index</p>
  
  <pre><code>&lt;option *ngFor='let item of items; let i = index, [value]='item.name',)&gt; {{ item.label }} {{ i == 2 ? '----' : ''}}&lt;/option&gt;
  </code></pre>
  
  <p>But I can't seem to get it to it's own line.<br>
  Any tips on how this can be done? Also any advice on how to have a better looking divider than --- would be appreciated. </p>
  
  <p>Thanks!</p>