3 or more buttons in angualr2-modal window

[navcoder]

Hi, I am using angular-2 modal and would like to show 3 buttons in the modal window Yes , No , Cancel

Am not able to figure out as I can only see max two button preset.

Please help.

[PhilippRoessner]

Would a custom modal not be the better way to go here?

[shlomiassaf]

@PhilippRoessner In this case it's easier to follow TwoButtonPreset and add one button... The core present handles 'n' buttons. But custom modal will work as well

maybe it can get the button's at runtime.

anyway, @navcoder look here: https://github.com/shlomiassaf/angular2-modal/blob/master/src/components/angular2-modal/presets/TwoButtonPreset.ts

In TwoButtonPreset I set only 2 buttons, so just add one more.

function createBindings(config: TwoButtonPresetData): ResolvedBinding[] {
    config.buttons = [
        {
            cssClass: config.okBtnClass,
            caption: config.okBtn,
            onClick: (modalComponent: MessageModal, $event: MouseEvent) =>
                modalComponent.dialog.close(true)
        },
        {
            cssClass: config.cancelBtnClass,
            caption: config.cancelBtn,
            onClick: (modalComponent: MessageModal, $event: MouseEvent) =>
                modalComponent.dialog.dismiss()
        }
       // ONE MORE HERE
    ];

    return Injector.resolve([
        provide(MessageModalContext, {useValue: config})
    ]);
}

Ofcourse, you will have to add meta data and stuff.

[navcoder]

Thanks @shlomiassaf . I think I will go with ThreeButtonPreset here. Will update if I run into some issue. Also to elaborate are you suggesting that 1) Create a ThreeButtonPreset similar to TwoButtonPreset 2) Inherit Modal class to have a new method that returns this ThreeButtonPreset similar to confirm() method Am I going right way? Thanks @PhilippRoessner for your suggestion as well. I have a requirement where modal window has some other controls. So I will go with this approach over there.

[navcoder]

@shlomiassaf - I am stuck and need your inputs. 1) I created a ThreeButtonPreset.ts which had your mentioned changes in config.buttons section as well as modified ThreeButtonPresetData class 2) I inherited Modal class to create ThreeButtonDialog, which has a method threeButtonConfirmation() that returns "ThreeButtonPreset" 3) Now when I try to use Modal in my code I can directly use it by importing it, but when I try to import ThreeButtonDialog, it throws errors at run time saying that "No provider for ThreeButtonDialog!"

Have I understood something wrong here?

[shlomiassaf]

@navcoder

I can assume you forgot to put an @Injectable decorator...

Anyway, this approach is less recommended.

What is better is to tell the DI what is the class for the Modal token, this is the angular 2 way...

bootstrap(App, [
        provide(Modal, {useClass: ThreeButtonDialog})
    ])

This will ensure you keep using the code as before, nothing changes. You can also revert back, per component, by providing a different injector configuration...

Or you can use a mixin approach where I add that function to the currently existing Modal class

[navcoder]

It is done now. :) 1) Inherited ThreeButtonPresetData from MessageModalPresetData like OneButtonPresetData does 2) Created instance of ThreeButtonPreset passing in it the Modal instance And hence used this ThreeButtonPreset instance to open the modal window.

[shlomiassaf]

@navcoder Great!

You will have some work in the next version, mainly file name/location changes so you will have to change some imports.

Next version will support angular 2 beta 16 which has a lot of breaking changes so I took the opportunity to add more features I wanted for a long time now.

Stay tuned.