Comment définir la mise au point automatique dans mat-select?

Question

Dans mon projet angular ont angular et utilisez mat-select. Mat-select est le premier élément de mon formulaire dans mon cas, définir la mise au point automatique pendant que la page était chargé avec succès mais je n'ai pas pu définir la mise au point automatique sur mat-select. Tout le monde peut m'aider à trouver le moyen de définir la mise au point automatique sur mat-select.

@ViewChild("name") nameField: ElementRef;

ngOninit() {
  this.nameField.nativeElement.focus();
} 

html

<div>
 <mat-select [(ngModel)]="nameField" #name>
    <mat-option *ngFor="let option of options2" [value]="option.id">
      {{ option.name }}
    </mat-option>
 </mat-select>
</div>

Answer 1

Vous pouvez appeler le focus sur OnInit

ts:

 options2 = ['A', 'B'];

  @ViewChild('name')
  nameField: MdSelect;

  ngOnInit() {
    setTimeout(() => {
      this.nameField.open();
    }, 0);
  }

html:

<div>
<md-select [(ngModel)]="nameField" #name>
    <md-option *ngFor="let option of options2" [value]="option.id">{{ option }}</md-option>
</md-select>

EDIT: Désolé, je pense que vous ne pouvez pas obtenir le nativeElement de mat-select Et md-select. Vous devez récupérer l'objet et appeler open(). Projet de travail ici dans stackblitz

Answer 2

Commençons par créer la directive auto-focus.directive.ts

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

@Directive({
     selector: '[autoFocus]' }) export class AutofocusDirective implements AfterContentInit {

     public constructor(private el: ElementRef) {     
     }

     public ngAfterContentInit() {
         setTimeout(() => {
             this.el.nativeElement.focus();
         }, 500);
     }
}

Ensuite, nous devons dire à notre AppModule que cette nouvelle directive existe et la déclarer pour disponibilité en mettant à jour notre app.module.ts:

@NgModule({
    declarations: [
        AutoFocusDirective
    ]
})

Vous pouvez maintenant l'utiliser dans un modèle de composant: app.component.html

<div> Autofocus? <input appAutoFocus> </div>