angular material dialog 재사용하기

공부를 위해 작성하는 글입니다.
정확한 정보가 아니니 이렇게 개발하는 사람도 있구나 하고 봐주시면 감사하겠습니다.

---

angular로 작업하던 중 여러개의 dialog를 띄워야 했습니다.

검색 중 angular material을 알게되었고 MatDailog를 사용하기로 했습니다.
angular material : https://material.angular.io/components/dialog/overview
참고한 dialog 예제 : https://stackblitz.com/angular/ndmgnpbqdjg?file=src%2Fapp%2Fdialog-data-example.ts

예제의 dialog 사용법은 아래와 같이 한개의 모듈에서 2개의 컴포넌트를 export하고 Module에서 선언해주는 방식이었습니다.

@Component({
  selector: 'dialog-data-example',
  templateUrl: 'dialog-data-example.html',
  styleUrls: ['dialog-data-example.css'],
})
export class DialogDataExample {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogDataExampleDialog, {
      data: {
        animal: 'panda'
      }
    });
  }
}

@Component({
  selector: 'dialog-data-example-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

---

@NgModule({
  imports: [
    ...생략
  ],
  entryComponents: [DialogDataExample, DialogDataExampleDialog],
  declarations: [DialogDataExample, DialogDataExampleDialog],
  ...생략
})
export class AppModule {}

하지만 공통으로 dialog를 관리하고 싶었기에 dialog 모듈을 분리하여 작성해보았습니다.

공통 dialog

작성 Module

• dialogTest : dialog Module
• product : dialog를 띄울 Module

dialog-test

@Component({
  selector: 'dialog-test',
  templateUrl: './dialog-test.component.html'
})

export class DialogTestComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any){
  }
}

MAT_DIALOG_DATA로 데이터를 받기

<div *ngIf="data == 1">
    <h1 mat-dialog-title>No.1</h1>
    <div mat-dialog-content>
        No.1
    </div>
</div>
<div *ngIf="data == 2">
    <h1 mat-dialog-title>No.2</h1>
    <div mat-dialog-content>
        No.2
    </div>
</div>

*ngIf를 이용하여 html 1개로 여러 Dialog 사용

product

@Component({
    selector: 'product',
    templateUrl: './product.component.html'
  })
export class ProductComponent {
    constructor(public dialog: MatDialog) {}
    openDialog(num){
        this.dialog.open(DialogTestComponent, {
            data: num
        });
    }
}

이곳에서 넘기는 데이터를 위의 MAT_DIALOG_DATA가 받음

@NgModule({
    declarations: [ProductComponent, DialogTestComponent],
    entryComponents: [DialogTestComponent],
    imports: [
        CommonModule,
  		MatDialogModule
    ]
})
export class ProductModule {}

여러차례 시도해본 결과 MatDialog는 모듈선언을 dialog를 띄울 module.
즉, productModule에서 선언을 해줘야만 MatDialog를 정상적으로 사용할수 있었습니다.
productModule에서 dialogTestComponent를 선언해줍니다.declarations, entryComponents 필수

<h1>MatDialog</h1>
<ul>
    <li>one <button mat-button (click)="openDialog()">click</button></li>
</ul>

MatDialog를 사용할때는 mat-button으로 호출

다른 Module에서 사용하기

동일한 Dialog내용들을 Shop Module에서도 사용해보겠습니다.

dialog-test

@Component({
  selector: 'dialog-test',
  templateUrl: './dialog-test.component.html'
})
export class DialogTestComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any){
  }
}

@Component({
  selector: 'dialog-test',
  templateUrl: './dialog-test.component.html'
})
export class DialogTest22Component {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any){
  }
}

dialog-test.component를 한번 더 export 해줍니다.
component 1개당 export 1번임으로 @component도 한번 더 선언해줍니다.

shop

@NgModule({
    declarations: [ProductComponent, DialogTest22Component],
    entryComponents: [DialogTest22Component],
    imports: [
        CommonModule,
  		MatDialogModule
    ]
})
export class ProductModule {}

module에서 두번째 export한 DialogTest22Component를 선언해줍니다.
이외는 product와 동일하게 사용합니다.

시행착오

• declarations : 이 모듈에서 사용하는 component(뷰 클래스)를 선언
• entryComponents : 동적으로 작동하는 component 선언
• declarations, entryComponents는
  • component만 선언할 수 있다.
  • @ngModule로 export된 component는 선언할 수 없다.
  • 선언된 component는 다른 모듈에서 재선언 할 수 없다.