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?

Raymonraymond

none of the solutions below worked for me for buttons on a dialog, but this answer works, namely to add cdkTrapFocus [cdkTrapFocusAutoCapture]="true" to a div containing the button to be focused, and then adding cdkFocusInitial to the button. also import A11yModule https://mcmap.net/q/893871/-cdkfocusinitial-attribute-not-focusing-the-dom-element – Tithonus

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.

Cupp

This did not work for me when trying to focus on a button inside an opened matDialogModal. – Heady

Answer 2

It looks like angular material already has directive for that. Check Angular A11y

<button mat-button cdkFocusInitial>Ok</button>

Steppe

https://mcmap.net/q/893871/-cdkfocusinitial-attribute-not-focusing-the-dom-element – Tammitammie

Answer 3

<button mat-button #btnFocus=matButton [autofocus]="btnFocus.focus()">Post</button>

Faliscan

Answer 4

You can use the focus method of MatButton.

<button mat-raised-button #button>{{ 'recovery' | translate }}</button>

@ViewChild('button') button;

ngOnInit() {
  this.button.focus()
}

Lest

Answer 5

Add a simple autofocus directive

The problem with the autofocus attribute is that it has the following behavior (see here the full source for more information about autofocus at MDN):

The autofocus global attribute is a Boolean attribute indicating that an element should be focused on page load, or when the <dialog> that it is part of is displayed.

So if your button or input element is rendered at later time autofocus won't work as expected.

You can easily change this behavior by wrapping the existing attribute inside your own custom directive that will also focus on the element when it is initialized. You only need a few lines of code; mine looks like this and works well:

import { AfterViewInit, Directive, ElementRef } from '@angular/core';

// This directive makes autofocus work for form input elements that are rendered after initial page load
@Directive({
  selector: 'input',
})
export class AutoFocusDirective implements AfterViewInit {

  constructor(public elementRef: ElementRef) {
  }

  public ngAfterViewInit(): void {
    if (this.elementRef.nativeElement.autofocus) {
      this.elementRef.nativeElement.focus();
    }
  }
}

Note: Make sure you load this globally or make sure that don't forget to load the directive in your module each time you want this customized behavior, otherwise you will be banging your head against the wall wondering why it doesn't work...

Silicic

Answer 6

<button mat-raised-button color="primary" #btn [autofocus]="btn.focus()">{{'recovery' | translate}}</button>

Heldentenor

please elaborate a little more what the question owner did wrong – Crosby

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tega