Angular Material Autocomplete set scrolltop

When opening the panel of a <mat-Autocomplete> I want to set the scrollTop to the value that is already initialised in the model. Therefore I am using to _setScrollTop method. The problem is, that the code below is not working when first opening the panel with the options, but only after I click on the input field again.

The .ts looks like this:

export class EventInfoComponent implements OnInit {

@Input('eventInfo') public eventInfo: SimpleEventInfoModel;
@ViewChild(MatAutocompleteTrigger) toTimeHidden: MatAutocompleteTrigger;
@ViewChild('toTimeComplete') toTimeAutocomplete: MatAutocomplete;

public openAutocomplete(e): void {
e.stopPropagation();
this.toTimeHidden.openPanel();
this.toTimeAutocomplete._setScrollTop(2016);
console.log(this.toTimeAutocomplete._getScrollTop());
}
}


And this is the HTML-snippet:

<mat-form-field appearance="outline">
<mat-label>End Time</mat-label>
<input matInput [required]="true" [(ngModel)]="eventInfo.toTime"
name="toTime" (click)="openAutocomplete($event)">
<input type="hidden" [matAutocomplete]="toTimeComplete
[(ngModel)]="eventInfo.toTime" #toTimeHidden name="toTimeHidden">
<mat-autocomplete #toTimeComplete="matAutocomplete">
<mat-option *ngFor="let time of times" [value]="time"> {{time}}
</mat-option>
</mat-autocomplete>
<mat-icon matSuffix style="margin: 0 8px 0 8px">access_time</mat-icon>
</mat-form-field>


The reason I am using two different inputs is that I am using another, custom directive to format the input.

Continue reading...