-3

How can we display only particular data in bootstrap modal window by looping using ngFor in Angular4

Nikhila K
  • 29
  • 5
  • 1
    See the "components as content" demo on https://ng-bootstrap.github.io/#/components/modal/examples. – JB Nizet Dec 31 '17 at 15:40
  • its fine when we display only one model window but i want to display seperate modal windows which have particular text which retrieves data from json for each this all happens when we click on div – Nikhila K Dec 31 '17 at 16:11
  • So, pass an argument to the open() method, and pass this argument to the component displayed in the modal, just as the `name = 'World'` is passed in the example. http://plnkr.co/edit/ps7klFdgg8vqTCuOknMK?p=preview – JB Nizet Dec 31 '17 at 16:12
  • Sharing data is working fine using @Input but when i am trying to use modal i was getting this error ERROR Error: No provider for NgbActiveModal! i have included everything can u pls help me with this – Nikhila K Jan 03 '18 at 10:35
  • You haven't included anything. Your question is s single sentend without any line of code. – JB Nizet Jan 03 '18 at 10:59

1 Answers1

0

You can try to pass an array to ng-template for example:

arrayVar = [
  "first value",
  "sencond value",
  "third value"
]

you can then use ngFor like this:

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>

<ng-template #template class="myClass" myArray="arrayVar">
  <div class="modal-header">
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div *ngFor="let hero of arrayVar">
        <td>{{hero}}</td>
    </div>
  </div>
</ng-template>

Demo using ngx-bootstrap modals:

https://stackblitz.com/edit/ngx-bootstrap-fqyt7u?file=app/app.component.html

with this example you can put whatever you want inside the modal, just pass the data you want.

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93