(@angular/material/dialog) MatDialogRef에 관해

로드할 컴포넌트와 선택적인 config object를 파라미터로 주어
open 메서드를 호출하면 다이얼로그가 열린다.

 

이 open 메서드는 MatDialogRef의 인스턴스로 반환된다.

let dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
});

 

 

MatDialogRef는 열린 다이얼로그를 조작할 수 있게 제공한다.

 

이는 dialog를 닫고 다이얼로그가 닫혔을때 알림을 받을수 있도록 사용할 수 있다.

 

모든 알림 Observables는 다이얼로그가 닫힐때 발생된다.

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`); // Pizza!
});

dialogRef.close('Pizza!');

위와같이 close 메서드에 "Pizza!" 라는 String 값을 전달하여,

다이얼로그가 닫혔을때에 이 값을 전달받을 수 있다. 

 

 

 

이를 활용하여 아래와 같이 Object형식으로 data를 전달할 수 있다.

this.passMyPersonalData('Bumday', 27, 'Singing');

passMyPersonalData(nickname, age, hobby){
  let data = {'nickname': nickname, 'age': age, 'hobby': hobby};
  
  dialogRef.close(data);
}

dialogRef.afterClosed().subscribe(result => {
  console.log(`His nickname: ${result['nickname']}`); 	// His nickname: Bumday
  console.log(`His age: ${result['age']}`);		// His age: 27
  console.log(`His hobby: ${result['hobby']}`);		// His hobby: Singing
});

 

 

MatDialog를 통해 생성된 컴포넌트는 MatDialogRef를 주입하고,

이를 통해 포함된 다이얼로그를 닫을 수 있다.

@Component({/* ... */})
export class YourDialog {
  constructor(public dialogRef: MatDialogRef<YourDialog>) { }

  closeDialog() {
    this.dialogRef.close('Pizza!');
  }
}

 

 

 

 

[References]

https://material.angular.io/components/dialog/overview

Angular Material