question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Documentation is unclear about how to get data into a Dialog.

See original GitHub issue

Bug, feature request, or proposal:

Documentation bug.

What is the expected behavior?

When I use the MdDialog service to open a dialog with some component, I’d love to be able to pass some configuration into that component.

What is the current behavior?

The dialogRef exposes componentInstance, which allows me to set properties / call functions on the component after construction, however I’m unsure if this is the recommended approach since it is not mentioned in the docs.

What are the steps to reproduce?

Read the docs at https://github.com/angular/material2/blob/master/src/lib/dialog/README.md, and notice the example uses a “static” dialog.

What is the use-case or motivation for changing an existing behavior?

It would improve the documentation and reduce the number of future issues.

Which versions of Angular, Material, OS, browsers are affected?

Latest /all

Is there anything else we should know?

I can submit a PR for improved documentation of an answer from this threads provides sufficient information!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:10
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
tmburnellcommented, Feb 14, 2017

I figured it out from another post: use this when opening

let dialogRef = this.dialog.open(myModal);
dialogRef.componentInstance.data = myData;

use this in the modal

ngOnInit() {
    this.data = this.dialogRef.componentInstance.data;
}
5reactions
SamMousacommented, Dec 8, 2016

I’ve added this to my todo list.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to pass data to dialog of angular material 2 - Stack Overflow
1) add the import statement import { MatDialog} from '@angular/material'; · 2) add the property to the constructor params · 3) define the...
Read more >
How to pass data to a MatDialog | nerd.vision
As you can see, passing data to a dialog component is as simple as adding a data key to the options parameter of...
Read more >
Angular Material Dialog: A Complete Example
In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material...
Read more >
Use a Dialog Model to Manage Ambiguous Responses
This document assumes you are familiar with the concepts around interaction models (intents, slots, and sample utterances) and dialog models (required slots, ...
Read more >
5 Essential UX Rules for Dialog Design | by Nick Babich
Dialogs are effective user interface element when you design and use them right. They can help your users complete reach their goals faster...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found