In my experience, I have developed a straightforward method to capture and display the response from a service in a modal dialog using material design for a reusable component. Below are some pseudo code pointers that can be updated as needed:
this.backEndService.myAPI(serviceRequest)
.subscribe(res => {
this.postProcess(res as string);
},
(error) => {
//handle error
}
);
Additional logic for handling the response:
private postProcess(generatedResponse: string) {
//perform tasks like setting loading to false etc..
const dialogRef = this.dialog.open(ModalDialogComponent, {
data: generatedResponse
});
dialogRef.afterClosed().subscribe(result => {
// nothing in my case
});
}
modal-dialog.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
@Component({
selector: ...,
templateUrl: ..,
styleUrls: [...]
})
export class ModalDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<ModalDialogComponent >,
@Inject(MAT_DIALOG_DATA) public generatedResponse: string) { }
ngOnInit() {
}
public onOk() {
console.log('onOk');
this.dialogRef.close({
data: {
closed: true
}
});
}
}
modal-dialog.component.html
<h2 mat-dialog-title>....</h2>
<mat-dialog-content>
<section fxLayout="row wrap" fxLayoutAlign="center center">
<mat-card fxFlex="500px" fxFlex.xs="100%">
<mat-card-title>Title
</mat-card-title>
<mat-card-content>
<div fxLayout="column wrap" fxLayoutGap="40px grid">
<div fxLayout="row wrap" fxLayoutAlign="center center">
<div fxFlex="65%"><strong>Status</strong>{{generatedResponse}}
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</section>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="onOk()">OK</button>
</mat-dialog-actions>