Angular Overlay menu UI element

General purpose of Angular overlay menu Designed to be as simple as possible in order to afford intuitive interactions.Angular overlay menu.

The CDK overlays depend on a small set of structural styles to work correctly. You can do so by importing the prebuilt styles in your global stylesheet.

This can be troublesome and the result may contain ugly hacks that’s hard to maintain and keep bug free. I wish to bring some attention to Angular CDK, a component development kit that may be exactly what you need to create your application-specific component. We’ll look into the and how it helps us to create a custom snack bar.


Global – Positions the element based on the directions passed in through positionSettings. These are Top/Middle/Bottom for verticalDirection and Left/Center/Right for horizontalDirection. Defaults to:

Connected – Positions the element based on the directions and start point passed in through positionSettings. It is possible to either pass a start point (type Point) or an HTMLElement as a positioning base. Defaults to:

Auto – Positions the element the same way as the Connected positioning strategy. It also calculates a different starting point in case the element goes partially out of the view port. The Auto strategy will initially try to show the element as the Connected strategy does. If the element goes out of the view port Auto will flip the starting point and the direction, i.e. if the direction is ‘bottom’, it will switch it to ‘top’ and so on. After the flipping, if the element is still of the view port, Auto will use the initial directions and the starting point to push the element into the view port. For example – if the element goes out of the right side of the view port by 50px, Auto will push it with 50px to the left.

Elastic – Positions the element as in Connected positioning strategy and re-sizes the element to fit inside of the view port (re-calculating width and/or height) in case the element is partially out of view. minSize can be passed in positionSettings to prevent resizing if it would put the element dimensions below a certain threshold. Defaults to:

For More Angular Article Click 

Leave a Reply

Your email address will not be published. Required fields are marked *