Angular Material Dialog Полное руководство

В этой статье я расскажу, как создать диалог в проекте angular. Для этого руководства я использую одну из самых известных библиотек Material UI Angular. В ней содержится компонент диалога, который мы можем использовать в любом проекте.

Эта статья содержит следующие разделы

1.Как установить плагин и создать простой диалог
2.Как отключить закрытие диалога при щелчке за пределами окна
3.Полезные опции конфигурации материального диалога
4.Как передавать данные в материальный диалог
5.Как передавать данные при закрытии диалога
6.Как установить плагин и создать простой диалог
7.Перед созданием модала сначала необходимо установить необходимые пакеты 8.с помощью следующей команды.

Как установить плагин и создать простой диалог

Перед созданием модала сначала необходимо установить необходимые пакеты с помощью следующей команды.

ng add @angular/material 
Вход в полноэкранный режим Выйти из полноэкранного режима

Это позволит установить Angular Material, Component Dev Kit (CDK) и Angular Animations. Также будет задан вопрос о теме, глобальной типографике и настройке анимации браузера. Убедитесь, что выбрали «Да» для анимации браузера. В противном случае большинство анимаций в модуле Material не будут работать.

Далее вы можете добавить необходимый модуль Material в файл модуля angular. В этом руководстве я использую свежий проект и единственный модуль, который у меня есть, это модуль app. Вы можете добавить его в любой модуль, в котором вы надеетесь использовать диалог.

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

@NgModule({

  imports: [
    ....
    MatDialogModule,
  ]
})
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте создадим компонент, который будет использоваться в качестве диалога. Выполните следующую команду, и она создаст компонент detail-dialog в папке component.

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 содержит метод 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)
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь при нажатии на кнопку вы сможете увидеть простой диалог.

Как отключить закрытие диалога при клике за его пределами

По умолчанию, когда пользователь щелкает за пределами диалога, он закрывается. Это поведение можно изменить, установив значение disableClose в true в MatDialogConfig.

Сначала создайте объект класса MatDialogConfig и установите свойство disableClose в true.

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

    this.matDialog.open(DetailDialogComponent,mdConfig)
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Также вы можете просто установить эти конфигурации, как показано ниже.

this.matDialog.open(DetailDialogComponent,{width:"500px",direction: "rtl"})
Войти в полноэкранный режим Выйти из полноэкранного режима

Просмотреть полную статью здесь

Связь со мной — Instagram |Blog |Youtube

Оцените статью
devanswers.ru
Добавить комментарий