title: How do I render dividers with *ngFor for tablet and phone views?
body: <p>I've got a big problem with my current front-end assignment. The designer built the following templates for the item display on a tablet and phone.  </p>
  
  <p><a href="https://i.stack.imgur.com/RhzSj.jpg" rel="nofollow noreferrer">Tablet view</a></p>
  
  <p><a href="https://i.stack.imgur.com/1gI4f.jpg" rel="nofollow noreferrer">Phone view</a></p>
  
  <p>As you can see, pairs of items are followed by a horizontal divider on a tablet except the last row of items. On a phone, each individual item is followed by a divider except the last item. </p>
  
  <p>Here is the template excerpt: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" *ngIf="customer"&gt;
      &lt;div class="col-md-6 col-sm-6 col-xs-12" *ngFor="let item of customer.items"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 col-sm-4 col-xs-4"&gt;
                  &lt;img class="img-responsive product-thumbnail" [src]="item.itemImageUrl"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8 col-sm-8 col-xs-8"&gt;
                  &lt;div class="item-heading"&gt;
                      &lt;b&gt;{{ item.title }}&lt;/b&gt;
                  &lt;/div&gt;
                  &lt;div class="item-details"&gt;
                      Item: 
                      &lt;b&gt;#{{ item.style }}&lt;/b&gt;&lt;br&gt;
                      SKU: 
                      &lt;b&gt;{{ item.sku }}&lt;/b&gt;&lt;br&gt;
                      Size:
                      &lt;b&gt;{{ item.size }}&lt;/b&gt;&lt;br&gt;
                      Color:
                      &lt;b&gt;{{ item.color }}&lt;/b&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried solving this problem using <em>odd</em> and <em>last</em> from <em>ngFor</em> and CSS class visibility with media queries to no avail. If anyone has dealt with it successfully, please tell me what I need to do to make it work. Thanks!</p>