Angular Material Dialog 전체 가이드

이 기사에서는 Angular 프로젝트에서 대화 상자를 만드는 방법을 설명합니다. 이 튜토리얼에서는 가장 유명한 Material UI Angular 라이브러리 중 하나를 사용합니다. 모든 프로젝트에 사용할 수 있는 기능이 포함된 대화 상자 구성 요소가 포함되어 있습니다.

이 문서에는 다음 섹션이 포함되어 있습니다.

1.플러그인 설치 및 간단한 다이얼로그 생성 방법
2.밖을 클릭할 때 대화 상자 닫기를 비활성화하는 방법
3. 재료 대화 상자 유용한 구성 옵션
4.재료 대화 상자에 데이터를 전달하는 방법
5.다이얼로그 닫을 때 데이터 넘기는 방법
6.플러그인 설치 및 간단한 다이얼로그 생성 방법
7. 먼저 모달을 생성하기 전에 다음 명령을 사용하여 필요한 8.패키지를 설치해야 합니다.

플러그인을 설치하고 간단한 대화 상자를 만드는 방법

모달을 만들기 전에 먼저 다음 명령을 사용하여 필요한 패키지를 설치해야 합니다.

ng add @angular/material 

이렇게 하면 Angular Material, 구성 요소 개발 키트(CDK) 및 Angular 애니메이션이 설치됩니다. 또한 테마, 글로벌 타이포그래피 및 설정 브라우저 애니메이션을 요청합니다. 브라우저 애니메이션에 대해 예를 선택했는지 확인하십시오. 그렇지 않으면 Material 모듈의 대부분의 애니메이션이 작동하지 않습니다.

다음으로 필요한 재료 모듈을 각도 모듈 파일에 추가할 수 있습니다. 이 튜토리얼에서는 새로운 프로젝트를 사용하고 있으며 내가 가지고 있는 유일한 모듈은 앱 모듈입니다. 대화 상자를 사용하려는 모든 모듈에 이것을 추가할 수 있습니다.

import { MatDialogModule } from '@angular/material/dialog'

@NgModule({

  imports: [
    ....
    MatDialogModule,
  ]
})

대화 상자로 사용할 구성 요소를 만들어 봅시다. 다음 명령을 실행하면 구성 요소 폴더 아래에 세부 대화 상자 구성 요소가 생성됩니다.

ng g c component/detail-dialog

생성된 컴포넌트의 HTML 파일을 열고 다음 HTML 부분을 추가합니다.

<h1 mat-dialog-title>User Details</h1>
<div mat-dialog-content>
    <p>Name : Shan</p>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>

여기서는 주로 3가지 속성을 볼 수 있습니다.

1.mat-dialog-title – 대화 제목을 정의하는 데 사용됩니다.
2.mat-dialog-content – ​​이 div 내에서 대화 상자의 내용을 지정할 수 있습니다.
3.mat-dialog-actions – 여기에서 작업 버튼 목록을 지정할 수 있습니다. 대화 상자 하단에 표시됩니다.
이제 누군가 작업을 트리거할 때 대화 상자를 표시하는 방법이 필요합니다. 따라서 기본 AppComponent에 버튼을 추가해 보겠습니다.

<button (click)="showDialog()">Show Contact Dialog</button>

app.component.ts 파일 내에서 트리거 이벤트를 추가해야 합니다.

여기에서 먼저 생성자에서 MatDialog 서비스를 주입해야 합니다. MatDialog 서비스에는 Dialog 구성 요소를 첫 번째 매개 변수로 허용하는 open 메서드가 포함되어 있습니다.

import { MatDialog } from '@angular/material/dialog';
import { DetailDialogComponent } from './component/detail-dialog/detail-dialog.component';


export class AppComponent {
  title = 'dialog-app';

  constructor(private matDialog:MatDialog){

  }

  showDialog(){
    this.matDialog.open(DetailDialogComponent)
  }
}

지금 버튼을 클릭하면 간단한 대화 상자를 볼 수 있습니다.

외부를 클릭할 때 대화 상자 닫기를 비활성화하는 방법

사용자가 대화 상자 외부를 클릭하면 닫히는 기본값입니다. 이 동작은 MatDialogConfig에서 disableClose를 true로 설정하여 변경할 수 있습니다.

먼저 MatDialogConfig 클래스의 객체를 생성하고 disableClose 속성을 true로 설정합니다.

showDialog(){
    const mdConfig = new MatDialogConfig();
    mdConfig.disableClose = true;

    this.matDialog.open(DetailDialogComponent,mdConfig)
  }

또한 아래와 같이 해당 구성을 설정할 수 있습니다.

this.matDialog.open(DetailDialogComponent,{width:"500px",direction: "rtl"})

전체 기사 확인here

나와 연결 - | Blog |