How to create and add html elements dynamically with angular

Question

I am trying to build a shopping web app as a project for my master degree.

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.

Any help it's welcomed.

<div class="container">
    <div class="row">
        <div class="col-6">
            <h1>Products</h1>
            <button (click)="addCategory()">Add category</button>
            <div id="Products">
            </div>
        </div>
        <div class="col-6">
            <h1>Shopping basket</h1>
            <div id="Shoppingbasket">
                <table id="Productstable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Image</th>
                            <th scope="col">Name</th>
                            <th scope="col">Price</th>
                            <th scope="col">Units</th>
                            <th scope="col">Description</th>
                        </tr>
                    </thead>
                    <tbody id="Productstablebody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

In Angular you not add elements to the .html. In Angular you has "variables" and create the html using these "variables" (in your case you need an array and the array can be an array of strings or an array of object) and *ngFor:angular.io/guide/…. So you only need add elements to your array or change the variable — Eliseo
– Eliseo, Commented Jun 3, 2021 at 11:25

John · Accepted Answer · 2021-06-03 11:32:33Z

1

I'd suggest looking at the Tour of Heroes tutorial on the Angular web site to learn more.

You can create a list in your component, call it categories, then add more categories when you click the addCategory button. In your html template, you can loop through the categories and create an element for each of them.

I created a minimal example in a Stackblitz. Below is a rough example of how it can be done

Angular component

categories: string[] = [];

addCategory() {
  this.categories.push('category');
}

HTML template

<div *ngFor="let category of categories">
  {{category}}
</div>

edited Jun 3, 2021 at 11:32

answered Jun 3, 2021 at 11:25

John

11.6k5 gold badges60 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jimbo Magusib · Accepted Answer · 2021-06-03 11:09:28Z

0

make an array of category; when you click add category add to the array then loop it in html like these

<div *ngFor="let category of categories" [id]="category.name">
</div>

answered Jun 3, 2021 at 11:09

Jimbo Magusib

2013 silver badges3 bronze badges

Collectives™ on Stack Overflow

How to create and add html elements dynamically with angular

2 Answers 2

Angular component

HTML template

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Angular component

HTML template

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related