title: How can I render objects to HTML with saving the previous value?
body: <p>I have the following data structure, and I'm trying to render each object individually on click whiteout overwriting the previous value with the current value.</p>
  <pre><code>boardCollection =
          [
            {
              id: 1,
              dashboardType: &quot;Simple&quot;,
              fields: [
                &quot;Board naspa&quot;,
                &quot;Cea mai mare mica descriere&quot;
              ]
            },
            {
              id: 2,
              dashboardType: &quot;Simple&quot;,
              fields: [&quot;Titlu fara idei&quot;, &quot;Descriere in speranta ca se va afisa&quot;]
            },
            {
              id: 3,
              dashboardType: &quot;Complex&quot;,
              fields: [&quot;Primu board complex&quot;, &quot;descriere dorel&quot;, &quot;Hai ca merge cu chiu cu vai&quot;]
            },
            {
              id: 4,
              dashboardType: &quot;Complex&quot;,
              fields: [&quot;Kaufland&quot;, &quot; merge si asta &quot;, &quot;aaaaaaaaaaaaaaaaaaaaaaaaaa&quot;]
            }
          ]
  </code></pre>
  <p>in which I am accessing the elements in the following manner -&gt;value/index are defined globally.</p>
  <pre><code> display() {
      let currentElement = this.boardCollection[this.index]
      this.value = currentElement;
      if (this.index &lt; this.boardCollection.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }    
    }
  </code></pre>
  <p>Here is the HTML and the way that i`m trying to render each object.</p>
  <pre><code>&lt;div *ngIf=&quot;show&quot;&gt;
    &lt;h1&gt;{{value.dashboardType}}&lt;/h1&gt;
    &lt;ol *ngFor=&quot;let prop of value.fields |keyvalue&quot;&gt;
      &lt;li&gt;{{prop.value }}&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;
  
  &lt;button (click)=&quot;display()&quot;&gt;Show&lt;/button&gt;
  </code></pre>
  <p>show is set to true in the display method.</p>
  <p>What I have achieved so far is to display each object or the properties from them, but each time the button is pressed, the current value will overwrite the previous value, therefore I'm looking for some help into saving the previous value in order to display each object so in the end to have all the objects from the Array rendered to the UI</p>