Disable style not working when using Angular Material.

[worthy7]

:ghost: Brief Description

When [disabled]="... logic on is a button, disableBtn: true option does not disable the button

:tophat: workflow configuration

Angular2PromiseButtonModule.forRoot({
    spinnerTpl: '<div class="cssload-container"><div class="cssload-speeding-wheel"></div></div>',
    disableBtn: true
}),

 <button mat-flat-button [matTooltipDisabled]="!data.service.previewMode" 
        matTooltip="Cannot book in preview!"
            [disabled]="!newMeetingForm.valid || (isStripeStandard(caldata.paymentAccountType) && !cardValid)"
            [type]="data.service.previewMode ? 'button' : 'submit'" color="primary" 
            [promiseBtn]="submitPromise"
            aria-label="Confirm">Confirm</button>

Steps To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

:police_car: Expected behavior

Button to be disabled when clicking, the promise is in motion.

:heavy_plus_sign: Additional context

Seems related https://github.com/johannesjo/angular2-promise-buttons/issues/34

[worthy7]

I see, the problem is related to using Angular Material, with the color set. In that situation it is ignoring the color but it is technically unpressable/disabled.

[worthy7]

Also, if the button is type='submit' then it does not stop the submit event!

[johannesjo]

Thanks for opening this up! Pull Requests fixing this would be welcome!