Angular 使用 ngx-smart-modal 将参数从 html 传递到组件

Question

I am using ngx-smart-modal in my project to pass value from html to component when is open. According to official doc of ngx-smart-modal l can handle events directly from the view. but l have undefined parameters.

HTML:

 <div class="card" *ngFor="let item of storeData">                         <!--  pass from here -->
 <div class="card-body text-right"(click)="ngxSmartModalService.getModal('addjob').open(item)">
  <a> 
 {{item?.title?.catname}}
 </a>
  </div>
 </div>

<!--  modal view -->
  <ngx-smart-modal #addjob identifier="addjob">
   <h1>hello</h1>
 </ngx-smart-modal>

Ts

  constructor(public ngxSmartModalService: NgxSmartModalService) { }

    ngAfterViewInit() {
      this.ngxSmartModalService.getModal('addjob').onOpen.subscribe((modal) => {
        console.log('opened!', modal.getData());
      });
    }

output console: undefined any idea please?

Answer 1

Finally i got my own solution.

TS:

  openaddjob(a){
    this.ngxSmartModalService.create('addjob', 'content').open();
    this.ngxSmartModalService.setModalData(a, 'addjob');

    console.log(a)
  }

HTML

 <div class="card" *ngFor="let item of storeData">
 <div class="card-body text-right"(click)="openModal(item)">
  <a> 
 {{item?.title?.catname}}
 </a>
  </div>
 </div>

<!--  modal view -->
  <ngx-smart-modal #addjob identifier="addjob">
   <div *ngIf="addjob.hasData()">
    <pre>{{ addjob.getData() | json }}</pre>
  </div>
    <!-- output
    {
        "$key": "12122211",
        "title": {
          "catname": "Food"
        }
      } -->
 </ngx-smart-modal>

Answer 2

When you try to open the modal programmatically just set data forcefully before opening modal.

this.ngxSmartModalService.setModalData({val: 1}, 'yourModalIdenitifier', true);
this.ngxSmartModalService.open("yourModalIdenitifier");

On another component (where you have a modal)

ngAfterViewInit() {
this.ngxSmartModalService.getModal('yourModalIdenitifier').onOpen.subscribe((modal) => {
  console.log('opened!', modal.getData()); // will print opened! {val: 1}
}); 
}

Happy Coding!!