Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hiding a MdDialog #5162

Closed
MaximeAnsquer opened this issue Jun 16, 2017 · 10 comments
Closed

Hiding a MdDialog #5162

MaximeAnsquer opened this issue Jun 16, 2017 · 10 comments
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix needs: discussion Further discussion with the team is needed before proceeding P4 A relatively minor issue that is not relevant to core functions

Comments

@MaximeAnsquer
Copy link

MaximeAnsquer commented Jun 16, 2017

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Ability to hide the MdDialog and then show it back, with the component inside of it not being changed.

What is the current behavior?

The component can only be closed, and the component inside is destroyed.

What are the steps to reproduce?

Open a dialog, change something inside it, close it, open it back, and see that the change is gone.

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

For example with a form inside a MdDialog, resetting the form when the dialog is closed/hidden is very annoying.

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

Angular 4.2.0-rc.2, Material 2.0.0-beta.6, any OS, any TypeScript version, any Browser

@julianobrasil
Copy link
Contributor

julianobrasil commented Jun 16, 2017

Have you tried binding it to some property of the component that is calling it?

You can use an object (not a primitive type) and pass it to the dialog to initialize it (dialogRef.componentInstance.instanceObj = this.callingComponentObj), then if, inside the dialog, you bind the controls (with [(ngModel)], for example) to the attributes of the dialog's instanceObj, any change you do to them will be reflected in calling component's callingComponentObj and can be used in future calls to the dialog. If this dialog is called accross the app, you can think of a service to host callingComponentObj.

@MaximeAnsquer
Copy link
Author

Nice idea, I will try that.

Thanks !

@jelbourn jelbourn added discussion feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions labels Jun 20, 2017
@moravcik
Copy link

moravcik commented Aug 7, 2017

Binding inputs is not a problem. In my case the UI inside of dialog is, let's say "expensive", e.g. multiple interactive maps. Building the dialog content UI every time is not very effective, I would need just to hide or show it.

@karol-depka
Copy link

karol-depka commented Sep 12, 2017

Please increase the priority. I don't think this is minor. My dialog has expensive components inside (Google Maps) and every time the dialog is opened, the app progressively slows down, down to a crawl...

@willshowell
Copy link
Contributor

@karol-depka, there is a "P3" duplicate at #6206. The official consensus seems to be:

Instead, I think it would make sense to add the ability to add/remove css classes to the dialog via MdDialogRef

It's open for community contribution if anyone cares to give it a shot!

@smkart
Copy link

smkart commented Aug 15, 2018

Much need feature , I have child components inside the dialog window , for with previous instance and values are needed , I would be better just to hide and open the dialog instead of passing the reference each time it opens dialog

@xmlking
Copy link

xmlking commented Jan 30, 2019

Chat-Bot Dialog/Popup is potential examples for this use case.

@julianobrasil
Copy link
Contributor

@willshowell submited an already merged PR about this topic: #14772.

@jelbourn
Copy link
Member

jelbourn commented Nov 7, 2019

Closing since MatDialogRef supports this now (via CSS classes)

@jelbourn jelbourn closed this as completed Nov 7, 2019
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 8, 2019
@mmalerba mmalerba added the needs: discussion Further discussion with the team is needed before proceeding label Mar 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix needs: discussion Further discussion with the team is needed before proceeding P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

No branches or pull requests

9 participants