CODEWITHSUNDEEP
angularangular-material
yantrab
yantrab

Reputation: 2672

Scroll into view for material expansion panel without disabling animation

I call scrollIntoView when a MaterialExpansionPanel opens.

opened(i) {
    setTimeout(() =>
        this.panels.toArray()[i].nativeElement.scrollIntoView({ behavior: 'smooth' }
    ));
}

It doew work, but if animation( [@.disabled]="true") is not disabled, I have to wait until Material animation has finished and this looks weird.

Is there any solution for that? Is there a way to disable animation only on open?

BTW - How can I send the element itself to the "opened" function?

Link to stackblitz.

Upvotes: 3

Views: 3162

Answers (1)

julianobrasil
julianobrasil

Reputation: 9377

There's an output where you can do both things you want: afterExpanded.

You can do (based on your stackblitz example):

<mat-expansion-panel *ngFor="let g of array;let i = index" 
                     (afterExpand)="open(i,panel)"
                     #panel>
  ...
</mat-expansion-panel>

and you can just call your method:

open(i: number, panel: MatExpansionPanel) {
  this.panels
    .toArray()[i]
    .nativeElement
    .scrollIntoView({ behavior: 'smooth' });

  // maybe you want to try doing:
  //
  // panel._body.nativeElement
  //    .scrollIntoView({ behavior: 'smooth' });
  //
  // But as _body is not part of the API, you must
  // do it at your own risk: it can change without any
  // previous warning
}

Upvotes: 5

Related Questions