title: How to create and add html elements dynamically with angular
body: <p>I am trying to build a shopping web app as a project for my master degree.</p>
  <p>So my problem is that when I click the button to add a category(calling the function addCategory in my .ts file) I don't know how to create a div and add it to the html file with the id of the category's name, from the .ts file.</p>
  <p>Any help it's welcomed.</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-6&quot;&gt;
              &lt;h1&gt;Products&lt;/h1&gt;
              &lt;button (click)=&quot;addCategory()&quot;&gt;Add category&lt;/button&gt;
              &lt;div id=&quot;Products&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-6&quot;&gt;
              &lt;h1&gt;Shopping basket&lt;/h1&gt;
              &lt;div id=&quot;Shoppingbasket&quot;&gt;
                  &lt;table id=&quot;Productstable&quot; class=&quot;table table-bordered&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th scope=&quot;col&quot;&gt;Image&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;Price&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;Units&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;Description&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id=&quot;Productstablebody&quot;&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>