dialog.ts

export class DialogComponent {
    constructor(private service: RestService, private dialogRef: MatDialogRef<DialogComponent>) {
    }

    no() {
        this.dialogRef.close();
    }

    save() {
        const url = ''; 
        const options = {headers: HttpHeaders, params: HttpParams};

        const getResp: any = this.service.Get(url, options);       
        this.dialogRef.close();

    ///THIS save() FUNCTION HARDCODED, BUT I WANT TO MAKE RESTCALL DYNAMICALLY WHEN ANYONE CLICKS SAVE BUTTON IN DIALOG
    }

}

dialog.html

<mat-dialog-actions>

    <button class="mat-raised-button"
            (click)="no()">
        no
    </button>

    <button class="mat-raised-button mat-primary"
            (click)="save()">
        save
    </button>

</mat-dialog-actions>

ponent1.ts

 getUsers() {

    const dialogConfig = new MatDialogConfig();

    const dialogRef = this.dialog.open(DialogComponent,
        dialogConfig, passSomeRestCall-1-FunctionSomehow());  
  }

ponent2.ts

 getEmployees() {

    const dialogConfig = new MatDialogConfig();

    const dialogRef = this.dialog.open(DialogComponent,
        dialogConfig, passSomeRestCall-2-FunctionSomehow());  
  }

Above 2 ponents have to make use of Dialog Component dynamically, currently above save() hardcoded with some restcall, but actually rest call needed when clicked on save() for both above ponents. So, in short, save() button should happen dynamic restcall based on the ponent.

Could anyone please help me on above, I am very new to angular.

EDIT:

 for (let i = 0; i < this.items.length; i++) {
      this.service.makeRestCall(this.items[i]);
    }

How do I pass above for loop logic in dialog ponent? I should be able to do some business logic dynamically inside save() based on ponent like below

save(){
   dynamicMethod() // this should be passed somehow from a ponent
  this.dialogRef.close();
} 

dialog.ts

export class DialogComponent {
    constructor(private service: RestService, private dialogRef: MatDialogRef<DialogComponent>) {
    }

    no() {
        this.dialogRef.close();
    }

    save() {
        const url = 'https://gorest.co.in/public-api/users'; 
        const options = {headers: HttpHeaders, params: HttpParams};

        const getResp: any = this.service.Get(url, options);       
        this.dialogRef.close();

    ///THIS save() FUNCTION HARDCODED, BUT I WANT TO MAKE RESTCALL DYNAMICALLY WHEN ANYONE CLICKS SAVE BUTTON IN DIALOG
    }

}

dialog.html

<mat-dialog-actions>

    <button class="mat-raised-button"
            (click)="no()">
        no
    </button>

    <button class="mat-raised-button mat-primary"
            (click)="save()">
        save
    </button>

</mat-dialog-actions>

ponent1.ts

 getUsers() {

    const dialogConfig = new MatDialogConfig();

    const dialogRef = this.dialog.open(DialogComponent,
        dialogConfig, passSomeRestCall-1-FunctionSomehow());  
  }

ponent2.ts

 getEmployees() {

    const dialogConfig = new MatDialogConfig();

    const dialogRef = this.dialog.open(DialogComponent,
        dialogConfig, passSomeRestCall-2-FunctionSomehow());  
  }

Above 2 ponents have to make use of Dialog Component dynamically, currently above save() hardcoded with some restcall, but actually rest call needed when clicked on save() for both above ponents. So, in short, save() button should happen dynamic restcall based on the ponent.

Could anyone please help me on above, I am very new to angular.

EDIT:

 for (let i = 0; i < this.items.length; i++) {
      this.service.makeRestCall(this.items[i]);
    }

How do I pass above for loop logic in dialog ponent? I should be able to do some business logic dynamically inside save() based on ponent like below

save(){
   dynamicMethod() // this should be passed somehow from a ponent
  this.dialogRef.close();
} 

• javascript
• angular
• angular-material

Share Improve this question Follow edited Apr 9, 2020 at 14:00 john asked Apr 9, 2020 at 12:02 johnjohn 1,14311 gold badge1616 silver badges2525 bronze badges 5

• can anyone pls look into above? – john Commented Apr 9, 2020 at 13:01
• use a switch statement? – Lieutenant Dan Commented Apr 9, 2020 at 13:09
• @docholiday sorry, I didn't get you, please understand my query. I should be able to pass some business logic in some dialog ponent, any idea? – john Commented Apr 9, 2020 at 13:55
• still looking for an answer. – john Commented Apr 9, 2020 at 17:39
• 1 still looking for an answer..... – john Commented Apr 10, 2020 at 4:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You do not need to pass the callback method. It should be part of modal's parent. Only you have need is to set @Output into the modal with type EventEmitter. Like:

@Output() save = new EventEmitter<boolean>();

On Save button just implement:

handleSave: void {
  this.save.emit(true);
}

Parent will listen this @Output and handle it properly.

dialogRef.ponentInstance.save$.subscribe((res) => {
    // Here is your business logic 
  }
);

So:

1. If after processing is everything OK, you can use dialogRef in your parent and close the modal (dialogRef.close()).
2. If something is wrong, modal will not be closed.

Using this way, our modal will be free of business logic. Especially important for generic modals, like confirmation, user inputs, ...

You can pass your url , options etc as data in your dialog ponent and pass it in save function like below.

UserComponent

 openDialog(): void {
    let ApiDetails = {
      url: 'https://gorest.co.in/public-api/users'
    }
    const dialogRef = this.dialog.open(DialogComponent,
      {
        data: ApiDetails
      });
  }

DialogComponent

export class DialogComponent implements OnInit {

  constructor(
    private dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  no(){
    this.dialogRef.close()
  }

  save(){
    console.log(this.data) // this will have url and other details whatever you send from calling parent
  }

}