如何在angular5中循环遍历ngx-smart-modal

Question

I'm working with ngx-smart-modal in angular 5 project, ngx-smart-modal works perfect when not inside the *ngFor loop. All I want is to fetch data danymically from database and display accordinng to number of loop. here is my code.

<div class="container">

    <div class="row">

     <div class="col-md-4 col-sm-6" *ngFor = "let modules of get_modules; let i = index">
          <article class="post-news"><a class="mouserPointer" (click)="ngxSmartModalService.getModal('myModal').open()"><img src="./assets/images/{{ modules.imagepath }}" alt="" class="img-responsive"></a>
                    <div class="post-news-body">
                      <h6><a class="mouserPointer" (click)="ngxSmartModalService.getModal('myModal').open()" >{{ modules.heading }} </a></h6>
                      <div>
                        <p>{{ modules.body }}</p>
                      </div>
                      <!-- <div class="post-news-meta offset-top-20"><span class="text-black"><span class="fa fa-clock-o"></span>2 days ago</span></div> -->
                    </div>
                  </article>
                  <!-- Print popup modal alongside -->
               <ngx-smart-modal #myModal identifier="myModal">
      <h1>{{ modules.heading }}!</h1>
      <img class="img-responsive" src="./assets/images/faa.jpg" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper neque ac ullamcorper scelerisque. Proin molestie erat sapien, ac dapibus tortor placerat a. Vivamus quis tempor mauris. Ut porta ultricies nisi in eleifend. In magna nisi, tempor pharetra consequat in, sagittis id augue. Aliquam eu lectus id mi vulputate convallis. Nam facilisis nisl quis urna gravida tempus.</p>

      <button (click)="myModal.close()" class="btn btn-danger">Close</button>
    </ngx-smart-modal>


       </div>

    </div>


  </div>

I tried several way of doing this like using the modal identifier to loop index but still didn't work. like.

<div class="container">

    <div class="row">

     <div class="col-md-4 col-sm-6" *ngFor = "let modules of get_modules; let i = index">
          <article class="post-news"><a class="mouserPointer" (click)="ngxSmartModalService.getModal('{{i}}').open()"><img src="./assets/images/{{ modules.imagepath }}" alt="" class="img-responsive"></a>
                    <div class="post-news-body">
                      <h6><a class="mouserPointer" (click)="ngxSmartModalService.getModal('{{i}}').open()" >{{ modules.heading }} </a></h6>
                      <div>
                        <p>{{ modules.body }}</p>
                      </div>
                      <!-- <div class="post-news-meta offset-top-20"><span class="text-black"><span class="fa fa-clock-o"></span>2 days ago</span></div> -->
                    </div>
                  </article>
                  <!-- Print popup modal alongside -->
               <ngx-smart-modal #{{i}} identifier="{{i}}">
      <h1>{{ modules.heading }}!</h1>
      <img class="img-responsive" src="./assets/images/faa.jpg" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper neque ac ullamcorper scelerisque. Proin molestie erat sapien, ac dapibus tortor placerat a. Vivamus quis tempor mauris. Ut porta ultricies nisi in eleifend. In magna nisi, tempor pharetra consequat in, sagittis id augue. Aliquam eu lectus id mi vulputate convallis. Nam facilisis nisl quis urna gravida tempus.</p>

      <button (click)="myModal.close()" class="btn btn-danger">Close</button>
    </ngx-smart-modal>


       </div>

    </div>


  </div>

Any help will be dully appreciated thanks.

Answer 1

I suggest you to declare only one <ngx-smart-modal> in your template and not loop over it.

You can use the setModalData(...) and getModalData(...) (the name of the methods may vary depending of the version of the library you're using and if you call it from the service or the component directly).

Then you can loop and set buttons with the data you want to display in the modal, and make the modal show the given data dynamically.

It's a huge performance improvement to do that, because if you put <ngx-smart-modal> in a loop, you'll force it to be declared again and again.

Let only one <ngx-smart-modal> instance active that will show the data dynamically depending on which button of your loop is clicked.