Trying to use Angular Material Dialog or Any Popup Window Component. Have following working, except last topic.
a) Back original screen should Not be greyed out,
b) User allowed to click back in original first window behind it
c) Send data back to original window Component.
d) Allow user to move modal/popup window to Second Monitor Screen, dual monitors. This is not working.
Simply it should be regular popup. How can this be done in Angular Material Dialog?
public openPropertySearchDialog(): void {
const propertySearchDialogRef = this.openPropertySearchDialog.open(DocumentPropertyGridComponent, {
width: '800px',
height: '450px',
disableClose: true,
autoFocus: false,
data: "test",
hasBackdrop: false
});
propertySearchDialogRef.afterClosed().subscribe(result => {});
}
We could use javascript window.open, however prefer Angular Material which offers full data binding communication service. If there is another Angular option, that can also work for answer.
Basically user presses Component 1: "Add Document" variable: selectedDocumentList: Array<string>
, and data sent Arrow Component 2: cumulativeDocumentList: Arrays<string>
. Cumulative list gets updated in real time. Have it working with Material Window Dialog.
Resource:
Material Dialog is not a window. it's just html element that pops up in absolute position and even if you make it draggable ,it's only for current window and wont go outside of current tab. window.open might be the way to go.
IDEA:
It is possible to create a route with a component which just includes Material Dialog and opens it on AfterViewInit hook.
like https://localhost:8443/dialogs/1 route and
when you need to open the dialog in new window you would call
open() {
const myWindow = window.open(
'https://localhost:8443/dialogs/1',
'_blank',
'width=200, height=100'
);
}
and from popup window inside
onNoClick(data: string): void {
this.dialogRef.close();
console.log(window.opener);
const parent = window.opener;
// But is it possible to pass data to parent and make a change?
// window.close();
}