Как установить MatButton активным (сфокусированным) Angular?

Question

Когда пользователь попадает на страницу в первый и следующий раз, размещенная кнопка не фокусируется и выделяется серым цветом.Я попытался установить автофокус:

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

Я считаю, что это несовершенство кнопок материала.

Как установить кнопку фокусированного материала в последнем Angular?

Answer 1

Вы можете просто установить фокус на кнопку на хуке жизненного цикла компонента ngAfterViewInit , например:

Шаблон

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

Файл Ts

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

Надеюсь, это поможет.

Answer 2

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

Answer 3

Вы можете использовать метод фокусировки мат-кнопки

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


 @ViewChild('button') button
 ngOnInit() {
      this.button.focus()
 }