How can I generate DOM element dynamically with attribute / event binding in Angular?

Question

I'm trying to create a component which is dependent on a configuration json file. It's content is dynamic so I need to add the elements dynamically.

I have the following lines in my controller for example:

const item: HTMLElement = this.renderer.createElement('div');
this.renderer.addClass(item, 'item');

This will generate a simple div:

<div class="item"></div>

How can I generate it with attribute / event binding, so it could be something like this:

<div class="item" [style]="property1" (click)="functionName()"></div>

Edit:

To be more specific, I'd like to generate this structure:

<div class="item">
    <div class="toggler" (click)="onTogglerClick(3)">accessories</div>
    <navbar-svg-caret></navbar-svg-caret>

    <div class="menu" [style]="visibility[3]">
        <div class="item">face masks</div>
        <div class="item">beanies</div>
        <div class="item">embroidered beanies</div>
        <div class="item">bucket hats</div>
        <div class="item">caps</div>
        <div class="item">neck sleeves</div>
        <div class="item">socks</div>
    </div>
</div>

That was just an example. Usually it's a div with a click event for a dropdown toggle and a div with style for it's corresponding dropdown menu. — arzenal96
– arzenal96, Commented Mar 24, 2021 at 7:57

Ganesh · Accepted Answer · 2021-03-24 08:00:36Z

1

How about *ngFor with JSON object.

It's bit tricky to bind the events for dynamically created DIV.

<span *ngFor="let object of yourObject">
     <div class="{{object.class}}" [style]="object.property1" (click)="functionName(object)"> {{object.lable}} </div>
</span>

Happy Coding.. :)

answered Mar 24, 2021 at 8:00

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

How can I generate DOM element dynamically with attribute / event binding in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related