Angular 5: opening a component inside a popup/dialog, best practice for adding content?

Question

My task:

Open an angular component inside a dialog and to add extra button to this component.

The Problem:

As for my knowledge, adding Html inside a component just to show it when the component opens inside the dialog/popup is wrong practice, since this piece of Html only related to the dialog/popup and not to the component, this might cause problemsin the future when other developer want to use this component, also functions that are related to this button are located in the dialog component, this results in poping the event from the click up to the dialog component - BIG mess.

In addition, adding the this button Absolutly on top of the component is also a bad practice, since the component might be modified in the future, also bad practice for responsive behavior.

I want to know if there are any known practices dealing with this kind of problem in Angular 5.

Thanks for reading.

Answer 1

Yes, there are examples. For instance, you could take a look at Angular Material's way of doing it, which I particulary like, for its convenience and easiness.

Otherwise, maybe you should try to do it by yourself to see how it works, it's not a bad practice and can be highly re-usable.