angularangular-material

How to set matButton active (focused) Angular?

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?

Solution

  • 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.