title: Angular *ngFor displays only part of array
body: <p>I want to print an array of items in <code>li</code> tag.
  The array for example will have 10 elements but I want to print only 4 on mobile devices and 6 on a desktop.</p>
  
  <p>I don't want to use <code>slice</code> method to delete non printed elements because in future it should be a slider.</p>
  
  <p>Is <code>*ngFor</code> a solution for this?</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let item of items"&gt;
        &lt;div class="producers"&gt;
          {{ item }}
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my TS</p>
  
  <pre><code>export class ProducersComponent implements OnInit {
  
    items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];
  
    innerWidth
  
    itemsToPrint
  
    @HostListener('window:resize', ['$event'])
    onResize(event) {
      this.innerWidth = window.innerWidth;
      if (this.innerWidth &lt; 600) {
        this.itemsToPrint = 4
      } else {
        this.itemsToPrint = 6
      }
    }
  
    constructor() { }
  
    ngOnInit() {
      this.onResize(event)
    }
  }
  </code></pre>
  
  <p>I'm checking the window size to change the number of items to print.</p>
  
  <p>How can I us it in the HTML file?</p>
  
  <p>Cheers,</p>
  
  <p>Kuba</p>