How to pass data to dialog of angular material 2

by

For the newest version of dialog (This is prior to Angular 5, for 5 see update below), you can do the following to pass data via the config which is much simpler and cleaner.

When you open the dialog, you can do it this way by adding data as a config param (just ignore the width and height which is there for illustration purposes):

this.dialogRef = this.dialog.open(someComponent, {
  width: '330px',
  height: '400px',
  data: {
    dataKey: yourData
  }
});

Then in the component that is opened in the dialog, you can access it like:

import {MD_DIALOG_DATA} from '@angular/material';
import { Inject } from '@angular/core';


constructor(
   @Inject(MD_DIALOG_DATA) public data: any
) { }

ngOnInit() {
  // will log the entire data object
  console.log(this.data)
}

Or you can use access it in the template or other methods, but you get the point.

UPDATE for Angular 5

Everything in the material has been changed from Md to Mat, so if on Angular 5, import like:

import {MAT_DIALOG_DATA} from '@angular/material'

Then inject like

@Inject(MAT_DIALOG_DATA) public data: any

UPDATE for Angular 9

MAT_DIALOG_DATA import location has changed to:

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

More Related Contents:

  1. mat-form-field must contain a MatFormFieldControl
  2. How to use MatPaginatorIntl?
  3. Open/Close sidenav from another component
  4. How to manually set focus on mat-form-field in Angular 6
  5. Filtering different columns in a material table
  6. Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
  7. How do I create a singleton service in Angular 2?
  8. Confirm password validation in Angular 6 [duplicate]
  9. Call child component method from parent class – Angular
  10. Apply a directive conditionally
  11. How can I unit test a component that uses the Router in Angular?
  12. Expandable table rows in angular 4 with angular material
  13. document.getElementById replacement in angular4 / typescript?
  14. localStorage is not defined (Angular Universal)
  15. Angular 6: saving data to local storage
  16. Uncaught Error: Unexpected directive ‘MyComboBox’ imported by the module ‘AppModule’. Please add a @NgModule annotation
  17. Recording the web page by using Record RTC with Angular
  18. Debug & Run Angular2 Typescript with Visual Studio Code?
  19. custom filter in mat-table
  20. Angular @ViewChild() error: Expected 2 arguments, but got 1
  21. Ionic2/Angular2 – Read a custom config file
  22. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  23. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  24. FormBuilder group is deprecated
  25. @angular/material/index.d.ts’ is not a module
  26. What is pipe for in RxJS?
  27. How to throw error from RxJS map operator (angular)
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment