Angular modal data pass 예시

async deleteBranch() {
    const modal = await this.modalController.create({
      component: DeleteBranchModal,
      componentProps: {
        item: this.branch,
      },
    });

    await modal.present();

    modal.onDidDismiss().then((res) => {
      if (res.role === 'submit') {
        this.router.navigateByUrl(
          this.router.routerState.snapshot.url.split('/')[1]
        );
      }
    });
  }

1. 모달 생성과 닫힌 후 로직 

2. item : 통신 키 값

 

 

 

 

import { Component, OnInit, Input } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { ModalController } from '@ionic/angular';
import { ButtonComponent } from 'src/app/components/button/button.component';
import { Branch } from 'src/lib/branch';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-delete-branch',
  templateUrl: './delete-branch.modal.html',
  styleUrls: ['./delete-branch.modal.scss'],
  standalone: true,
  imports: [IonicModule, ButtonComponent, CommonModule],
})
export class DeleteBranchModal implements OnInit {
  @Input() item!: Branch;

  constructor(private modalController: ModalController) {}

  ngOnInit() {}

  dismiss() {
    this.modalController.dismiss();
  }

  submit() {
    this.modalController.dismiss(null, 'submit');
  }
}

2. dismiss() : 두 번째 인자의 프로퍼티는 role 입니다. 따라서 위에서 role === 'submit' 비교가 가능합니다.