Angular Material Button : disabledInteractive
May 29, 2024
disabledInteractive attribute used with Angular Material button and its usages with examples.
1. Understanding disabledInteractive
1. A native disabled button can neither receive focus nor dispatch events.2. In Angular Material, we can disable a button as well as enable it to receive focus and dispatch events with the help of
disabledInteractive attribute.
3. In our application, sometimes the requirement is that a tool tip should be displayed for why this button is disabled. In a native disabled button, we cannot achieve it, but in Angular Material button we can achieve it using
disabledInteractive attribute with disabled attribute.
4. The
disabledInteractive changes the button style as disabled and marks as aria-disabled="true" but allows the button to receive focus and events.
5. The
disabledInteractive can be enabled globally for buttons using MAT_BUTTON_CONFIG injection token.
6. A native disabled submit button does not listen click event to submit form, but when we use submit button with
disabledInteractive attribute, it can listen the click event and submit the form, so we need to handle such type of scenarios ourselves.
7. If a disabled button with
disabledInteractive is not meant to be tabbable then set the tab index accordingly to prevent the button action.
2. Using disabledInteractive
Find the button usingdisabled and disabledInteractive.
<button mat-raised-button disabled disabledInteractive matTooltip="This functionality is disabled">Button disabled</button>
3. Handling Form Submission
As we know that button withdisabledInteractive attribute listens events. Hence when we click on disabled submit button, form will be submitted. We need to handle it.
Here in my example, I have a form and its submit button is disabled.
HTML :
<form [formGroup]="eleForm" (ngSubmit)="onFormSubmit()">
-----
<button id="mySubmitButton"
mat-raised-button
disabled
disabledInteractive
matTooltip="This functionality is disabled">Button disabled</button>
</form>
onFormSubmit() will execute. Here we can check it whether button is disabled or not. If button is disabled, discard the form submit process.
TS:
onFormSubmit() {
const isButtonDisabled = document.getElementById('mySubmitButton')?.ariaDisabled;
if (isButtonDisabled) {
console.log('Button disabled.');
} else {
console.log(this.eleForm.value);
}
}
4. Configure disabledInteractive Globally
We can usedisabledInteractive globally with the help of MAT_BUTTON_CONFIG that will enable every button as aria-disabled="true" but listen focus and dispatch events.
For global setting, use
MAT_BUTTON_CONFIG as below.
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { MAT_BUTTON_CONFIG } from '@angular/material/button';
export const APP_CONFIG: ApplicationConfig = {
providers: [
provideAnimations(),
{provide: MAT_BUTTON_CONFIG, useValue: {disabledInteractive: true}}
]
};
disabledInteractive: true by default in our application.
<button mat-raised-button disabled matTooltip="This functionality is disabled">Button disabled</button>
5. Output
In the print-screen, I have two disabled buttons and second button is usingdisabledInteractive. When we hover pointer on it, tooltip message is displayed.
6. Conclusion
disabledInteractive is a feature of Angular Material that we can use with disabled attribute in a button. We should use disabledInteractive only if we want to make a disabled button interactive. We also learnt that disabledInteractive can be enabled globally. As disabled button is interactive, so we need to handle its event properly, for example, handle form submit by disabled button.
