How I can Dynamically Create Bootstrap Modal using For loop Angular6

Question

<div *ngFor="let task of data ; let i = index" [attr.data-index]="i">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal fade" id="{{task.id}}">
    //HTMl Content
  </div>
</div>

In the above code I am unable to add the data-target Dynamically for the button. i have gone through this but this is modifying for all the modals at once only and having same name.

Thanks for your Help in advance.

Akber Iqbal · Accepted Answer · 2019-04-22 09:34:07Z

1

You'd have to use [attr.data-target]="'#MyModal'+task.id" ... considering the data structure is:

this.data = [
       {id:1, buttonLabel: 'test label 1', modalBody: 'Demo Modal body contents #1' }
      ,{id:2, buttonLabel: 'test label 2', modalBody: 'Demo Modal body contents #2' }
      ,{id:3, buttonLabel: 'test label 3', modalBody: 'Demo Modal body contents #3' }
      ];

This would be the HTML:

<div *ngFor="let task of data ; let i = index" [attr.data-index]="i">
  <button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#MyModal'+task.id">
    Open modal
  </button>
</div>

answered Apr 22, 2019 at 9:34

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

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

1 Comment

Akber Iqbal Over a year ago

this is the demo link: stackblitz.com/edit/…

Collectives™ on Stack Overflow

How I can Dynamically Create Bootstrap Modal using For loop Angular6

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related