Components: Dynamically Loaded Components(Dialog, Toast)

[borislemke]

Bug, feature request, or proposal:

I noticed that the Angular team hasn't started on components that needs to be dynamically loaded such as the MD Dialog and MD Toast present in Angular Material 1. There is no best practice in how to load and destroy elements like these in Angular 2. Any ideas on how this can be achieved?

In Angular Material 1, we could also pass data into the dialog and output data when the dialog is destroyed/hidden(promise based).

What is the expected behavior?

Dynamically load components into the view for modals, toasts and the likes

What is the current behavior?

No proper documentation

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

If the Angular team has started on at least one of these components(dialog or toast), we may start exploring the possibilities of how to best handle dynamically loaded components and create our own

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

Angular 2.0.0-rc.3
Angular Material 2.0.0-alpha.5-2

[TheCaptainDate]

We can pass any data to dynamic components by using of ng-content.

In case of Modal we actually can place our html things inside any component that gonna use this Modal because modal should not draw itself before call of popup() or something. Also modal should have absolute position and z-index so there is no any reason for modal to be pasted somewhere at the special place (like root component or etc).

You can just write your modal where you want, pass data by using of ng-content and finally draw it when *ngif becomes true.

From the other hand it will be cool if modal component can be written only ones somewhere in root component and then just been reused when need to.

[borislemke]

Thanks for the reply @TheCaptainDate . However, in Angular Material 1.x, this is not how dialogs and toasts work. They just get injected by a service-like module($mdDialog) which does not require the explicit declaration of a selector element(e.g my-dialog) in the document. These element will just get dynamically injected into the documents body. I'm keen to know what the Angular team thinks and whether they can give a better insight.

[TheCaptainDate]

@borislemke take a look

[borislemke]

@TheCaptainDate thanks mate! Exactly what I was looking for. Will keep track of it

[jelbourn]

Check out https://github.com/angular/material2/pull/761.

More coming soon!

[m00zi]

ng-content solved my problem. Thanks

[angular-automatic-lock-bot[bot]]

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._}