I have a regular mat-slide-toggle with a click event like below:
<mat-slide-toggle (click)="do()" [(ngModel)]="checked"></mat-slide-toggle>
This component is triggered by both click and spacebar. But with the spacebar it doesn’t trigger the click event. How can I do so?
And in terms of accessibility. It is right to trigger by spacebar and not with enter key?
>Solution :
But with the spacebar it doesn’t trigger the click event. How can I do so?
You should use (change)="do()" as the underlying component is an input type="checkbox". This should cover all input types.
And in terms of accessibility. It is right to trigger by spacebar and not with enter key?
Yes, a switch operates in the same way as a checkbox so the expected key is Space. You can read more about expected behaviour of a role="switch" element on MDN.
It is worth noting that if the underlying component for a role="switch" is a <button> then you can use (click)="do()" and it will work with Enter as well, but this isn’t the case in the material library component (useful to know if you ever make your own though!).