Angular-material - animation and position is not displaying correct

Question

I am trying trying to open and animate from top and close as well correctly (same behaviour as it have from bottom for opening and closing), but unable to do so in angular-material.

It should only close on the click of close button and with nothing else actions and how to Get the selected chip value on every click in ts method.

Any other way to achieve the goal ie to get a top-sheet like we have bottom-sheet is also welcomed.

https://stackblitz.com/edit/angular-fkfckf-twerla?file=app%2Fbottom-sheet-overview-example-sheet.html

Answer 1

Unfortunately there is not functionality to do this as it was designed to be a bottom-sheet ... so you will need to be willing to override some css to do this... You can do the following to achieve this.

set disableClose in config

this.bottomSheet.open(BottomSheetOverviewExampleSheet,{
      disableClose: true
    });

Override CSS

@Keyframes slideDown{
 0%{ opacity: 0 }
 100%{ 
  opacity: 1;
  transform: translateY(0%);
 }
}

::ng-deep .cdk-overlay-pane{
  top: 0 !important;
  position: absolute !important;
  transform: translateY(-250%);
  animation: slideDown 0.5s forwards 0s ease-in;
}

::ng-deep .cdk-overlay-container > * {
 animation: none;
}

You can also pass a custom class if you do not want to override css globally and use child selectors.

this.bottomSheet.open(BottomSheetOverviewExampleSheet,{
      disableClose: true,
      panelClass: 'some-custom-class-here'
    });

Please Note: you will need to work on this concept further if you want to control the close animation beyond what it is in the stackblitz.

Stackblitz

https://stackblitz.com/edit/angular-fkfckf-sslp2l?embed=1&file=app/bottom-sheet-overview-example.ts