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?

CodePudding user response：

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!).