0

I'm fairly new to Angular and am trying to use a material input component inside a material expansion panel. I want the input to be autofocused when I expand the expansion panel. but the autofocus="autofocus" does not seem to work on the input field for some reason. I see that there is a focus method available in the material docs but I'm not sure how to use this. Here is the code: `

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name 
      </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-form-field>
      <input matInput placeholder="First name" autofocus="autofocus">
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

`

Amritraj
  • 25
  • 2
  • 11

1 Answers1

-1

Use

(focus)="myFocusMethod($event, orPassAnyVars)"

Generally: Popular events that are used extensively in Angular application are as follows:

(focus)="myMethod()"
(blur)="myMethod()"

(submit)="myMethod()"

(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"

You can catch event by using $event as funtion() argument. Thanks.

Sami Haroon
  • 869
  • 10
  • 14
  • 1
    Try using a directve like https://stackoverflow.com/questions/41873893/angular2-autofocus-input-element/42745350 (Personally I prefer Hampus's answer) – Eliseo Feb 19 '19 at 16:00
  • I guess I misread the question. But so I guess my answer is for general purpose. – Sami Haroon Feb 19 '19 at 16:25