angular ionic - how to add click event to dynamic created div

Question

My HTML is creating dynamic divs with ngFor

    <div class="container">
      <div class="scroll" scrollX="true" >

        <div *ngFor="let i of lotes" class="card" id="card_{{i.id_lote}}">
          <div class="title">
            {{ i.nome_lote }}
          </div>
        </div>

      </div>
    </div>

Then I'm looping an array with ID's and trying to set click listeners on those divs:

  ngAfterViewInit() {
    this.lotes.forEach(function(lote){

      let card_instance = document.getElementById('card_'+id_lote);
      console.log(card_instance);     // <==================== this works and shows correct element

      card_instance.addEventListener("click", (evt) => {
        console.log('aaaahhhhh');
      });

    });
  }

So I can reach the element but when I click it nothing happens. It looks like the addEventListener don't work...

Am I doing this the right way?

Jazib · Accepted Answer · 2019-09-05 22:35:54Z

2

you can use the click on the div like this:

 <div class="title" (click)="yourFunction(i)">
            {{ i.nome_lote }}
          </div>

and in your component just create a function like this

ngAfterViewInit() {}

 yourFunction(loteThatWasClicked): void{
    console.log(loteThatWasClicked);
 }

answered Sep 5, 2019 at 22:35

Jazib

1,37914 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

angular ionic - how to add click event to dynamic created div

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