[转]Angular 4|5 Material Dialog with Example
本文转自:https://www.techiediaries.com/angular-material-dialogs/
We'll also see common cases to work with the Angular Material Dialog such as:
- how to create a dialog,
- how to pass data to the dialog component,
- how to get data back from a dialog component,
- how to use various configuration options for dialogs.
Before starting, first, you’ll need to make sure you have followed the steps to setup Angular Material for your Angular application.
Most Angular Material components have their own module so you can use a specific component without importing the whole library. For Dialog you need to import the MatDialogModule
module:
import {MatDialogModule} from "@angular/material";
Next you need to add the module to your main module imports array.
/* ... */
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MatDialogModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Now you are ready to create your dialog. The process involves a few steps:
- first, you need to import and inject
MatDialog
in the component constructor where you want to call the dialog, - next, you need to create an instance of
MatDialogConfig
which holds configuration options for the dialog (this is optional, you can also pass a literal object i.e{...}
), - finally you need to call the
open()
method of the injectedMatDialog
instance with the component to use as the body of the dialog and the configuration object.
From the final step, you can understand that the open()
method needs a component as a body so you'll need to create an Angular component.
Use the Angular CLI to generate a component:
ng g component dialog-body
Next, you’ll need to import the dialog component in the app module and add it into the declarations and entryComponents arrays:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { MatDialogModule } from "@angular/material";
import { AppComponent } from "./app.component";
import { DialogBodyComponent } from "./dialog-body/dialog-body";
@NgModule({
declarations: [AppComponent, DialogBodyComponent],
imports: [BrowserModule, MatDialogModule],
providers: [],
bootstrap: [AppComponent],
entryComponents: [DialogBodyComponent]
})
export class AppModule {}
Step 1: Importing and Injecting MatDialog
To be able to call the dialog, you'll need to import and inject MatDialog
in the calling component i.e for this example AppComponent:
import { Component, Inject } from "@angular/core";
import {
MatDialog,
MatDialogConfig
} from "@angular/material";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "Example Angular Material Dialog";
constructor(private dialog: MatDialog) {}
}
Step 2: Opening the Dialog
Next add the openDialog()
method which opens the dialog:
openDialog() {
const dialogConfig = new MatDialogConfig();
this.dialog.open(DialogBodyComponent, dialogConfig);
}
As we already said, you open the dialog by calling the open() method of the injected MdDialog instance and you pass the dialog component as a parameter and an optional configuration object.
You can pass different configuration option such as:
- data: object or string to send data to the dialog,
- height: set the height of the dialog,
- width: set the width of the dialog,
- disableClose: enable/disable closing the form by clicking outside the dialog,
- autoFocus: if true, automatically sets focus on the first form field etc.
Step 3: Creating the Dialog Component
We have previously generated the dialog body component. Now let's use Angular Material directives designed to style the dialog body:
mat-dialog-title
: This directive is used for the title of the dialog,mat-dialog-content
: this directive is designed for the container of body of this dialog,mat-dialog-actions
: this directive is designed for the container of the action buttons at the bottom of the dialog
Open src/dialog-body/dialog-body.html
and add:
<h2 mat-dialog-title>This is a Dialog title</h2>
<mat-dialog-content>
<p> Place content here </p>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="close()">Close</button>
</mat-dialog-actions>
Step 4: Closing the Dialog and Implementing Action Buttons
The MatDialogRef
provides a reference of the opened dialog. This reference can be used to close the dialog and also to notify the calling component when the dialog gets closed. Any component created via MatDialog
can inject the MatDialogRef
reference and use it to perform the previously mentionned operations.
Now let's implement the close button. First import MatDialogRef
from @angular/material
:
import { MatDialogRef } from "@angular/material";
Next inject MatDialogRef<DialogBodyComponent>
as dialogRef.
@Component({
selector: "dialog-b",
template: "<h1>Dialog body component</h1>"
})
export class DialogBodyComponent {
constructor(
public dialogRef: MatDialogRef<DialogBodyComponent>){}
Finally, you can use this reference to the dialog component to control many aspects such as closing the dialog and sending data back to the parent component etc.
close() {
this.dialogRef.close();
}
You can optionally pass some value which can be received back in the calling component.
close() {
this.dialogRef.close("Thanks for using me!");
}
Step 5: Sending Data to The Dialog Component
To be able to send or more accurately share data with the dialog component, you can use the data option to pass data:
openDialog() {
const dialogConfig = new MatDialogConfig();
dialogConfig.data = "some data";
let dialogRef = this.dialog.open(DialogBodyComponent, dialogConfig);
}
You can also pass objects instead of simple string values:
dialogConfig.data = { name: "some name"};
For accessing shared data in your dialog component, you need to use the MAT_DIALOG_DATA
injection token:
import { Component, Inject } from "@angular/core";
import {
MAT_DIALOG_DATA
} from "@angular/material";
@Component({
selector: "dialog-b",
template: "passed in data: "
})
export class DialogBodyComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
Step 6: Receiving Data from The Dialog Component
In the calling component, we can get the data passed from the dialog. From the previous example, you can see that calling the open()
method returns a reference to the dialog:
let dialogRef = this.dialog.open(DialogBodyComponent, dialogConfig);
This dialog reference has a afterClosed()
observable which can be subscribed to. The data passed from the dialog is emitted from this observable.
dialogRef.afterClosed().subscribe(value => {
console.log(`Dialog sent: ${vaue}`);
});
Conclusion
Dialogs represents an important UI component for most web application and thanks to Angular Material you can quickly craft professional and good looking dialogs without having to deal with CSS.
10 Apr 2018
[转]Angular 4|5 Material Dialog with Example的更多相关文章
- [转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container
本文转自:https://blog.csdn.net/qq_24078843/article/details/78560556 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- 【转】Android新组件Material Dialog,SwipeRefreshLayout,ListPopupWindow,PopupMenu等
朝花夕拾----新组件的学习和使用 分类: Android UI2015-06-26 11:31 440人阅读 评论(0) 收藏 举报 uidialogMaterial 目录(?)[-] Mate ...
- angular material dialog应用
1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (clic ...
- 拟物设计和Angular的实现 - Material Design(持续更新)
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
- Angular 学习笔记 (Material Datepicker)
https://material.angular.io/components/datepicker/overview 官网介绍很清楚了,这里记入一下我比较不熟悉的. 1. moment js Angu ...
- Angular 学习笔记 Material
以后都不会写 0 到 1 的学习记入了,因为官网已经写得很好了. 这里只写一些遇到的坑或则概念和需要注意的事情. Material Table 1. ng-content 无法传递 CdkColumn ...
- 拟物设计和Angular的实现 - Material Design
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
- Angular 学习笔记 (Material Select and AutoComplete)
记入一些思考 : 这 2 个组件有点像,经常会搞混. select 的定位是选择. 目前 select 最糟糕的一点是 not search friendly. 还有当需要 multiple sele ...
- Angular 学习笔记 (Material table sticky 原理)
更新 : 2019-12-03 今天踩坑了, sticky 了解不够深 refer http://www.ruanyifeng.com/blog/2019/11/css-position.html 阮 ...
随机推荐
- xbeePRO900HP的几个关键参数
xbee PRO 900HP又叫xbee PRO S3B,在模块的正面有S3B的字样: 因为用到这个模块的,多用的是digimesh组网固件,所以以下参数修改只针对digimesh的修改:市面上的xb ...
- ABP框架系列之五十:(Swagger-UI-集成)
Introduction From it's web site: "....with a Swagger-enabled API, you get interactive documenta ...
- MBR内容解析
原先博客放弃使用,几篇文章搬运过来 MBR(Master Boot Record)即主引导记录. 使用Winhex打开,磁盘的第一扇区: 黄色部分(000H-1B7H):引导分区 作用:在主板BIOS ...
- <Listener>servletContextListener、httpSessionListener和servletRequestListener使用整理
在java web应用中,listener监听器似乎是不可缺少的.经常常使用来监听servletContext.httpSession.servletRequest等域对象的创建.销毁以及属性的变化等 ...
- Linux 线程编程2.0——线程同步-互斥锁
当我们需要控制对共享资源的存取的时候,可以用一种简单的加锁的方法来控制.我们可以创建一个读/写程序,它们共用一个共享缓冲区,使用互斥锁来控制对缓冲区的存取. 函数 pthread_mutex_init ...
- 使用ILMerge 打包C# 绿色免安装版程序
使用ILMerge工具,将C#项目debug目录下的exe及其依赖的dll文件打包成一个exe文件,直接双击就可运行. 使用工具: ILMerge :http://www.microsoft.com/ ...
- .NET MVC 学习笔记(一)— 新建MVC工程
一..NET MVC 学习笔记(一)—— 新建MVC工程 接触MVC有段时间了,一直想找机会整理一下,可是限于文笔太差,所以一直迟迟羞于下手,想到最近做过的MVC项目也有一些了,花点时间整理一下方便以 ...
- 骚年,看我如何把 PhantomJS 图片的 XSS 升级成 SSRF/LFR
这篇文章实在是太好了,我看了好几篇,所以极力推荐给大家 原文地址 http://buer.haus/2017/06/29/escalating-xss-in-phantomjs-image-ren ...
- centos docker安装和使用
系统要求:centos7,内核3.10或更高一.配置yum源并安装 vim /etc/yum.repos.d/docker.repos [dockerrepo] name=Docker Resposi ...
- Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型
除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了 并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别 今天就介绍一下JS中的Array的特别之处 区别 1 ...