Creating methods within a class method in Typescript - Angular 2

Question

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.

Nitzan Tomer · Accepted Answer · 2016-05-13 22:45:02Z

2

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);
    }
}

edited May 13, 2016 at 22:45

answered May 13, 2016 at 21:41

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

7 Comments

sharpmachine Over a year ago

This is almost what I was thinking. There is going to be two methods though; alert and confirm

Nitzan Tomer Over a year ago

I wasn't planning for my code to fit exactly, just to give you an example of how to implement the builder pattern in your case. You should modify it to answer your exact needs.

sharpmachine Over a year ago

I don't understand how this would work if there's two methods? I'm a noob.

Nitzan Tomer Over a year ago

I'm not exactly sure what you want to do. What is the difference between alert and confirm? in your confirm function you're calling bootbox.dialog, what will alert do? Also in your code inside the confirm function you call the same function in the ok button callback, is it meant to be recursive?

sharpmachine Over a year ago

With one, I want to show an alert, and the other I want to show a confirm...so we will have a _dialog.alert() and a _dialog.confirm() with their own sets of methods. I was just showing confirm up top to keep things simple.

|

Picci · Accepted Answer · 2016-05-13 21:37:37Z

I would try something like

export class DialogService {

public title: string;
public messafe: string;
.....  // all other properties

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()
        }
      }
    })
  }

}

and then, in the component that uses the DialogService

export class SomeComponent {

  constructor(private _dialog: DialogService){}

  this._dialog.title = 'some title';
  this._dialog.message = 'some message';
  // the rest of the stuff

  this._dialog.showConfirm();

}

I hope I heve understood your point and that this helps

Collectives™ on Stack Overflow

Creating methods within a class method in Typescript - Angular 2

2 Answers 2

Edit

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related