Brian F Love
Learn from a Google Developer Expert focused on Angular, Web Technologies, and Node.js from Portland, OR.
Ad ·ultimatecourses.com
Learn Angular the right way with Ultimate Courses

Passing Data with MdDialog

Make your MaterialMdDialogstateless by passing data as part of theMdDialogConfigobject.

[Update April 11, 2017]

With the release of @angular/material version 2.0.0-beta.3 the config property ofMdDialogRefhas been removed. We now use theMD_DIALOG_DATAtoken to inject the data into our dialog's component. See thisGitHub issue.

Stateless

What do I mean bystateless? Let's look at the definition of stateless fromWikipedia:

Of a system or protocol, such that it does not keep a persistent state between transactions.

In a basic sense, a component in our Angular application is consideredstatefulwhen it:

  • is dependent on requesting data from a service,
  • has knowledge about the state of the application,
  • resolves data via routing, or
  • 我们的应用程序状态的变化。

And, a component might be consideredstatelesswhen it:

  • receives data viainput properties,
  • does not request data from a service,
  • emits data to a parentstatefulcomponent that acts upon it, or
  • renders furtherstatelesscomponents.

Stateless components are sometimes referred to asdumbcomponents.

Want to read more about stateless vs. stateful components? Check outTodd Motto's article on Stateful and Stateless components.

Passing data inMdDialogConfig

First, let's take a look at theMdDialogConfiginterface:

/** * Configuration for opening a modal dialog with the MdDialog service. */exportdeclareclassMdDialogConfig{viewContainerRef?:ViewContainerRef;/** The ARIA role of the dialog element. */role?:DialogRole;/** Whether the user can use escape or clicking outside to close a modal. */disableClose?:boolean;/** Width of the dialog. */width?:string;/ * *高度of the dialog. */height?:string;/** Position overrides. */position?:DialogPosition;/** Data being injected into the child component. */data?:any;}

Note thedataproperty. It allows us to inject data into the child component that is created when weopen()anMdDialog. Here is an example component that opens the dialog and passes aUsermodel object to the child component:

import{Component,Input}from"@angular/core";import{MdDialog}from"@angular/material";//dialogimport{InviteDialogComponent}from"../dialogs/invite-dialog/invite-dialog.component";//modelimport{User}from"../models/user";/** * The invite card. * @class InviteCardComponent */@Component({selector:"j11-invite-card",templateUrl:"./invite-card.component.html",styleUrls:["./invite-card.component.scss"]})exportclassInviteCardComponent{//the authenticated user@Input()publicuser:User;/** * @constructor * @param {MdDialog} mdDialog */constructor(privatemdDialog:MdDialog){}/** * Open the dialog to send an invite * @method openInviteDialog */publicopenInviteDialog(){this.mdDialog.open(InviteDialogComponent,{disableClose:true,data:{user:this.user}});}}

Let's review theInviteCardComponent:

  • We importMdDialogfrom the@angular/materialpackage.
  • This component itself isstatelessand receives theuserviaproperty binding.
  • We inject an instance ofMdDialogin theconstructorfunction.
  • TheopenInviteDialog()method is invoked by the UI to open theInviteDialogComponentdialog.
  • Thedataproperty is an object that contains our custom data that will be passed to the child dialog component.

Accessing custom Data

First, we need to import theMD_DIALOG_DATAconstant, which is really just an instance of theOpaqueTokenclass:

import{MdDialogRef,MD_DIALOG_DATA}from"@angular/material";

Next, use the@Inject()decorator to inject the data via ourconstructor()function:

constructor(@Inject(MD_DIALOG_DATA)privatedata:{user:User})

Now we just pick that data up inside our child component'sngOnInit()method. Here is the full example:

import{Component,Inject,OnInit}from"@angular/core";import{MdDialogRef,MD_DIALOG_DATA}from"@angular/material";//modelimport{User}from"../models/user";@Component({selector:"j11-invite-dialog",templateUrl:"./invite-dialog.component.html",styleUrls:["./invite-dialog.component.scss"]})exportclassInviteDialogComponentimplementsOnInit{//authenticated userpublicuser:User;/** * @constructor * @param {Object} data * @param {MdDialogRef} mdDialogRef */constructor(@Inject(MD_DIALOG_DATA)privatedata:{user:User},privatemdDialogRef:MdDialogRef<InviteDialogComponent>){}/** * Let's do this. * @method ngOnInit */publicngOnInit(){//set custom data from parent componentthis.user=this.data.user;}}

OK, let's review the code above:

  • First, I am importing theInjectdecorator.
  • Then, I am importing theMdDialogRefclass and theMD_DIALOG_DATAconstant.
  • I have declared a publicly accessible variable nameduserthat is the authenticated user in my app.
  • Thedatais injected in theconstructorfunction using the@Injectdecorator.
  • Finally, in thengOnInit()method I am setting the reference ofuser.

That's it. Super easy. Thanks to the@angular/material2team!

Brian F Love

Hi, I'm Brian. I am interested in TypeScript, Angular and Node.js. I'm married to my best friend Bonnie, I live in Portland and I ski (a lot).