title: How to clear an aray after all it's elemenets have been rendered
body: <p>My question is purely related to Angular/Typescript. I've an array whose elements I'm using printing on HTML page. the code is not ready yet. I've something like this:</p>
  <p><strong>Typescript</strong></p>
  <pre><code>import { Component, Input, NgZone, OnInit } from '@angular/core';
  ...
  
  @Component({
      selector: '...',
      templateUrl: '...'
  })
  export class MyComponent implements OnInit {
      ...
      staticKpi = [];
      
      constructor(...) {
          super();
      }
  
      ngOnInit(): void {
          this.initializeComponent();
      }
  
      private initializeComponent() {            
          let row = []; // For e.g. Apple, Banana, Mango, etc
          ...
          // GET CALL TO AN API TO POPULATE row[]
          ...
          this.staticKpi.push(row); // &lt;--- THIS I WANT TO CLEAR AFTERWARDS
          row=[]; // CLEAR THE ARRAY
      }
  }
  </code></pre>
  <p><strong>HTML/Template</strong></p>
  <pre><code>&lt;div *ngFor=&quot;let element of staticKpi&quot;&gt;
      &lt;h2&gt;element&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  <p>After <code>staticKpi</code> being rendered I want to clear the array so that it is ready for next round of GET call otherwise the next set of elements are just adding upon to the previous set of elements (concatenated). But In my case nothing is displayed. I think it is being cleared as soon as it is populated. Please point out my mistake.</p>