通过ngx bootstrap modal函数向子组件传递数据

Question

I have the following code in my Parent component in an angular application

PARENT COMPONENT

<div>
    <button *ngIf="data.type == 'el'" (click)="readInfo('el')">click</button>
    <button *ngIf="data.type == 'ga'" (click)="readInfo('ga')">click</button>
</div>


readInfo(type) {
    if (type === 'el') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, el);
    } else if (type === 'ga') {
      this.bsModalRef = this.modalService.show(ChildComponent, { class: 'modal-lg' }, ga);
    }
  }

CHILD COMPONENT

 <div class="container" *ngIf="el">
      <!-- el contents goes here -->
  </div>

  <div class="container" *ngIf="ga">
    <!-- ga contents goes here -->
</div>

i want to pass a value to the ChildComponent from my parent component through the modal function. My objective is to retrieve this value inside my ChildComponent and display contents based on it using *ngIf

Answer 1

Solution 1

Using callback to pass the data back to parent component, and pass it via component property to child component.

this.modalSvc.show(LoadGeneratorAddModalComponent, {
         initialState: {
            successCb: (data) => {
                // data come from the modal, assign it to your variable in parent component
                this.dataPassToChild = data;
            }
         }
      }
    ); 

Solution 2

You can always pass data via service, create a subject, and expose the observable in service. You can observe the observable in the child component, and trigger the event in the modal component.