How to create Full screen Overlay Navigation using angular-material

1
votes

I'm using angular material with angular5 and angular flex-layout, and I was looking for a similar full screen overlay window angular component, but it seems like they didn't implement a one yet, and since I prefer consuming time on working on functionality rather than accessory component, I decided to ask you guys to share an example about it in "angular way" (if you already coded it).

2
angularangular-materialangular-material2angular-flex-layout
The Material team has abstracted common behaviors into the @angular/cdk (component development kit). It's separate from Material, but Material implements it frequently. Check out the overlay component: material.angular.io/cdk/overlay/overview Also check the source of things like mat-dialog to see how they've implemented it. - joh04667
material.angular.io/components/sidenav/overview - mxr7350

2 Answers

5
votes

You can use MatDialog and make it full screen by including MatDialogConfig properties:

width: '100vw',
height:  '100vh',
maxWidth: '100vw',
maxHeight: '100vh',
hasBackdrop: false,

See example.

-1
votes

You can refer to this site.

It provides screenoverlay along with multiple type of spinners. Moreover if you want to close the screen overlay then refer to this stackblitz which implements the above screen overlay.

stackblitz llink