title: How to Add ion-card with changing values programmatically in typescript?
body: <p>I  am building a simple app where i read some Posts from server and try to display the latest posts as cards in the screen . I am still in a very early stage and i am testing as to how to add ion-card elements with changed contents and headers with typescript ? my current code is like ths :</p>
  
  <pre><code>fillPost() {
      for (let i: number = 0; i &lt; 10; i++) {
  
  
           this.postContainer += "&lt;ion-card&gt; "
              + "&lt;ion-item&gt; &lt;h2 item-left&gt; Name here &lt;/h2&gt;"
              + "&lt;p&gt; Post Number : +"i+" &lt;/p&gt; &lt;/ion-item&gt; &lt;ion-card-content&gt;"
              + "&lt;p&gt; Post Body here &lt;/p&gt; &lt;/ion-card-content&gt;"
              +"&lt;ion-row &gt; &lt;ion-col &gt; &lt;button ion- button icon- left clear small&gt; "
              + "&lt;ion-icon name= \"thumbs-down\" &gt; &lt;/ion-icon&gt;"
              + "&lt; div &gt; Report &lt; /div&gt;"
              + "&lt;/button&gt;"
              + "&lt;/ion-col&gt;"
              + "&lt;ion-col center text-center&gt;"
              + "&lt;ion-note&gt;"
              + "1h ago"
              + "&lt;/ion-note&gt;"
              + "&lt;/ion-col&gt;"
              + "&lt;/ion-row&gt;"
              + "&lt;/ion-card&gt;";
  
      }
  
  
  
  }
  </code></pre>
  
  <p>and in my HTML file : </p>
  
  <pre><code> &lt;div [innerHTML]="postContainer"&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>there is a button which called the fillPost() function as to test things out but the results looks like this :</p>
  
  <p><a href="https://imgur.com/a/z5XyW" rel="nofollow noreferrer">http://imgur.com/a/z5XyW</a></p>
  
  <p>please help me and thanks .</p>