How to implement callback function in Typescript (Angular Material)?

Question

I am using Angular Material Dialog component, I want to pass an optional callback function, and execute if the user click the OK button. May I know how to implement it?

askUser(customData: any) {
    openDialog() {
        const dialogRef = this.dialog.open(AskDialog, {
            data: customData
        });

        dialogRef.afterClosed().subscribe(isOK=> {
            if (isOK && customData.hasOwnProperty('callback')) {
                // ??? how to execute the "customData.callback"
            }
        });
    }
}

I hope I can use the askUser() as such:

function freeGift(gift: string) { /* ... */ }
function contactPolice(phone: number, email: string) { /* ... */ }

askUser({ // callback
    displayText: 'Are you a superman?',
    callback: freeGift('blue shirt')
});

askUser({ // different callback with different arguments
    displayText: 'Are you a criminal?',
    callback: contactPolice(this.phone, '[email protected]')
});

askUser({ // no callback
    displayText: 'Do not disturb!'
});

How to PASS the callback into the customData.callback, and how to invoke and execute the function?

In other words, how to pass a function into a "variable", and execute the "variable" later with proper context?

Is it possible?

Henry · Accepted Answer · 2018-10-29 12:17:55Z

11

You could do something like this:

askUser({ // callback
    displayText: 'Are you a superman?',
    callback: () => freeGift('blue shirt')
});

and you would call it like:

customData.callback();

answered Oct 29, 2018 at 12:17

Henry

43.9k7 gold badges75 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lars Meijdam · Accepted Answer · 2018-10-29 12:18:03Z

0

This can be achieved fairly easily, you can execute a function by just using (). Made an example app to elaborate; https://stackblitz.com/edit/angular-8drwks

answered Oct 29, 2018 at 12:18

Lars Meijdam

1,1751 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to implement callback function in Typescript (Angular Material)?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related