How to set matButton active (focused) Angular?

Question

When first and following time user enters the page, placed button is not focused and highlighted by gray color. I tried to set autofocus:

<button mat-raised-button color="primary" autofocus>{{'recovery' | translate}}</button>

I consider that it is imperfection of Material buttons.

How to set focused material button in last Angular?

Answer 1

You can just set focus to the button at component's life-cycle hook ngAfterViewInit for example:

Template

<button mat-raised-button color="primary" #btnRef="matButton">{{'recovery' | translate}}</button>

Ts file

...
@ViewChild('btnRef') buttonRef: MatButton;
...
ngAfterViewInit() {
   this.buttonRef.focus();
}
...

Hope that helps.