Question

132

Creating methods within a class method in Typescript - Angular 2

rated 0 times [ 139] [ 7] / answers: 1 / hits: 24705 / 8 Years ago, fri, may 13, 2016, 12:00:00

In Angular 2 I'm using bootbox.js to create dialogs (alerts, confirmations). I'm trying to create a dialog service, but I'm not sure how to write the code in Typescript is such a way that would allow me to use my service methods the way I'm hoping to.

How I want to use my service:

export class SomeComponent {



  constructor(private _dialog: DialogService){}



  showConfirm() {

    _dialog.confirm()

      .title('Some title')

      .message('Some message')

      .okBtn('Sounds Good')

      .cancelBtn('No way!')

      .confirm(() => {})

      .cancel(() => {})

  }



showAlert() {

        _dialog.alert()

          .title('Some title')

          .message('Some message')

          .okBtn('Sounds Good')

          .callback(() => {})

      }

My service as it currently:

export class DialogService {



confirm() {

    bootbox.dialog({

      title: title,

      message: message,

      buttons: {

        cancel: {

          label: cancelBtn,

          className: 'btn-inverse btn-inverse-primary',

          callback: () => cancel()

        },

        okay: {

          label: okBtn,

          className: 'btn-inverse btn-inverse-primary',

          callback: () => confirm()

        }

      }

    })

  }



 alert() {

    bootbox.dialog({

      title: title,

      message: message,

      buttons: {

        okay: {

          label: okBtn,

          className: 'btn-inverse btn-inverse-primary',

          callback: () => callback()

        }

      }

    })

  }



}

Obviously I would rather pass in the title, message, etc. from the component that's using my service, but I'm just not sure how to write the service to allow the usage to be done the way I would to.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reed

Add To Favorites

Follow

Total Points: 725

Total Questions: 85

Total Answers: 89

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

reed questions

1 npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Tue, Jul 5, 22, 00:00, 2 Years ago

1 Alpine.js: How do I access x-data from a function in an external file?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 I have an error : Cannot find module './utils'

Sun, Aug 16, 20, 00:00, 4 Years ago

1 react drag,drop, and connect arrow(or anything else) with animation between elements

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Lodash.uniqueId always returns 1

Thu, May 23, 19, 00:00, 5 Years ago

View All

answered 8 Years ago susand · Accepted Answer

If I understand you correctly then you're looking for the builder pattern.

Here's an implementation based on your code:

class DialogService {

    private _title: string;

    private _message: string;

    private _okBtn: string;

    private _cancelBtn: string;

    private _confirm: string;

    private _cancel: string;



    constructor() {}



    public title(value: string): DialogService {

        this._title = value;

        return this;

    }



    public message(value: string): DialogService {

        this._message = value;

        return this;

    }



    public okBtn(value: string): DialogService {

        this._okBtn = value;

        return this;

    }



    public cancelBtn(value: string): DialogService {

        this._cancelBtn = value;

        return this;

    }



    public confirm(value: () => {}): DialogService {

        this._confirm = value;

        return this;

    }



    public cancel(value: () => {}): DialogService {

        this._cancel = value;

        return this;

    }



    public show(): void {

        bootbox.dialog({

            title: this._title,

            message: this._message,

            buttons: {

                cancel: {

                    label: this._cancelBtn,

                    className: 'btn-inverse btn-inverse-primary',

                    callback: this._cancel

                },

                okay: {

                    label: okBtn,

                    className: 'btn-inverse btn-inverse-primary',

                    callback: this._confirm

                }

            }

        });

    }

}

Then:

new DialogService()

    .title('Some title')

    .message('Some message')

    .okBtn('Sounds Good')

    .cancelBtn('No way!')

    .confirm(() => {})

    .cancel(() => {})

    .show();

Edit

I saw your changed question after posting this edit, so I'm re-editing it:

interface ButtonData {

    label: string;

    className: string;

    callback: () => void;

}



class DialogService {

    private static BUTTON_CLASS_NAME = btn-inverse btn-inverse-primary;



    private _title: string;

    private _message: string;

    private _okay: ButtonData;

    private _cancel: ButtonData;



    constructor() {}



    public title(value: string): DialogService {

        this._title = value;

        return this;

    }



    public message(value: string): DialogService {

        this._message = value;

        return this;

    }



    public okay(label: string, callback?: () => void): DialogService {

        this._okay = {

            label: label,

            className: DialogService.BUTTON_CLASS_NAME,

            callback: callback || function() {}

        };



        return this;

    }



    public cancel(label: string, callback?: () => void): DialogService {

        this._cancel = {

            label: label,

            className: DialogService.BUTTON_CLASS_NAME,

            callback: callback || function() {}

        };



        return this;

    }



    public alert(): void {

        bootbox.dialog({

            title: this._title,

            message: this._message,

            buttons: {

                okay: this.okay

            }

        });

    }



    public confirm(): void {

        bootbox.dialog({

            title: this._title,

            message: this._message,

            buttons: {

                cancel: this._cancel,

                okay: this.okay

            }

        });

    }

}

older edit

I'm still not sure what exactly you're looking for, I changed things a bit and made sure that there are confirm and alert methods, but I'm not sure what they are supposed to do...

The confirm uses the bootbox.dialog your code has, but I had no idea what to do with the alert so I invented the bootbox.alert function.

It's probably wrong and you'll need to implement that yourself...

interface ButtonData {

    label: string;

    className: string;

    callback: () => void;

}



interface ServiceData {

    title: string;

    message: string;

    buttons: {

        cancel: ButtonData,

        okay: ButtonData

    };

}



class DialogService {

    private static BUTTON_CLASS_NAME = btn-inverse btn-inverse-primary;

    private data: ServiceData



    constructor() {

        this.data = <ServiceData> {

            buttons: {

                cancel: <ButtonData> {},

                okay: <ButtonData> {}

            }

        };

    }



    public title(value: string): DialogService {

        this.data.title = value;

        return this;

    }



    public message(value: string): DialogService {

        this.data.message = value;

        return this;

    }



    public okay(label: string, callback?: () => void): DialogService {

        this.data.buttons.okay = {

            label: label,

            className: DialogService.BUTTON_CLASS_NAME,

            callback: callback || function() {}

        }



        return this;

    }



    public cancel(label: string, callback?: () => void): DialogService {

        this.data.buttons.cancel = {

            label: label,

            className: DialogService.BUTTON_CLASS_NAME,

            callback: callback || function() {}

        }



        return this;

    }



    public confirm(): void {

        bootbox.dialog(this.data);

    }



    public alert(): void {

        bootbox.alert(this.data);

    }

}