I am making an Angular 5 application. I want to make an overlay filter. If the filter button is clicked, the expansion panel will be visible in an overlay field. Just as shown on the images. It is basically an expansion panel, but with the expanded field being overlayed.I've tried to use matDialog just as here:
How can I position a dialog above the triggering button?
// Dialog Component
import { Component, ElementRef, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from
'@angular/material';
@Component({
selector: 'app-dialog-component',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.scss']
})
export class MyDialogComponent implements OnInit {
private _matDialogRef: MatDialogRef<LocationFilterComponent>;
private triggerElementRef: ElementRef;
constructor(_matDialogRef: MatDialogRef<LocationFilterComponent>,
@Inject(MAT_DIALOG_DATA) data: { trigger: ElementRef }) {
this._matDialogRef = _matDialogRef;
this.triggerElementRef = data.trigger;
}
ngOnInit() {
const matDialogConfig: MatDialogConfig = new MatDialogConfig();
const rect = this.triggerElementRef.nativeElement.getBoundingClientRect();
matDialogConfig.position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
matDialogConfig.width = '300px';
matDialogConfig.height = '400px';
this._matDialogRef.updateSize(matDialogConfig.width, matDialogConfig.height);
this._matDialogRef.updatePosition(matDialogConfig.position);
}
cancel(): void {
this._matDialogRef.close(null);
}
}
// Call the dialog
onShowDialog(evt: MouseEvent): void {
const target = new ElementRef(evt.currentTarget);
const dialogRef = this._matDialog.open(MyDialogComponent, {
data: { trigger: target }
});
dialogRef.afterClosed().subscribe( _res => {
console.log(_res);
});
}
but it didn't do what I wanted it to do. The position has to follow the choosen element. And in this case, the position, width and height are fixed.
Any suggestions or solutions on how to make this work so that it can be just like the images?
