CODEWITHSUNDEEP
angulartypescriptngx-bootstrap
javiens
javiens

Reputation: 141

Pass data to modal using ngx-bootstrap modal

I am using angular 8 and ngx-boostrap to open modals and pass data from parent to modal. But not working as expected. What should I do to make it working?.. This my stackblitz demo and code

HTML

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 
<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <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">
    Just a modal with a {{initialState.data1}}
  </div>
</ng-template>

Component

openModal(template: TemplateRef<any>) {
    const initialState = {
    data1 : 'foo'
}
    this.modalRef = this.modalService.show(template, {initialState});
  }

Upvotes: 5

Views: 4522

Answers (2)

A&#239;ssa
A&#239;ssa

Reputation: 686

I could make it work using:

<ng-template #template>
  <div class="modal-header">
  <h4 class="modal-title pull-left">Modal for data : {{ data1 }}</h4>
  <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">
    This is a modal.
  </div>
</ng-template>

and :

openModal(template: TemplateRef<any>) {
  const initialState = {
    data1 : 'foo'
  };
  this.modalRef = this.modalService.show(template, {initialState});
}

Many thanks to: https://levelup.gitconnected.com/how-to-pass-data-between-ngx-bootstrap-modal-and-parent-e348cd596cf7

Upvotes: 1

Shah
Shah

Reputation: 565

You can use it like this

HTML

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal for data : {{ modalService.config.initialState.data1 }}</h4>
    <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">
    This is a modal.
  </div>
</ng-template>

Component

openModal(template: TemplateRef<any>) {
    const user = {
        data1 : 'foo'
      };
    this.modalRef = this.modalService.show(template, {
      initialState : user
    });
  }

And this online DEMO

Upvotes: 5

Related Questions