Sharing Top Content from the Angular-sphere.

Create Powerful Action Menu with Angular and Popper

  • Create Powerful Action Menu with Angular and PopperIn almost every web developer’s career, there’s a point where he needs to create a custom drop-down or action menu to use in his application.Like any good developer, we do not want to reinvent the wheel, but instead look to existing libraries.But inevitably, each…
  • Let’s create an action menu that will eliminate all the disadvantages mentioned above.We are going to use Popper.js ,which will help us with the positioning.A KICKASS LIBRARY USED TO MANAGE POPPERS IN WEB APPLICATIONSOur final result will be the The Origin DirectiveWe need to a way to identify the origin so…
  • We also need an elegant solution that listens for click events so we can toggle the The Dropdown DirectiveThe drop-down directive is our way of identifying the drop-down element so we can later pass his reference to The Action Menu ComponentThe action menu component is responsible for grabbing the origin…
  • We are subscribing to the click event of the origin element and toggling the drop-down based on the _open property.
  • Popper expects to get the origin and the drop-down element for doing his magic.We also add a handler, just in case the user clicks out of the drop-down and it needs to be closed.And that’s it.Now, if we need to add a divider, for example, we just add it.Final note:…

In almost every web developer’s career, there’s a point where he needs to create a custom drop-down or action menu to use in his application. Like any good developer, we do not want to reinvent the…

Create Powerful Action Menu with Angular and PopperIn almost every web developer’s career, there’s a point where he needs to create a custom drop-down or action menu to use in his application.Like any good developer, we do not want to reinvent the wheel, but instead look to existing libraries.But inevitably, each library that we find will have one of the following disadvantages:The library does not append the element to the body, preventing us from using overflow hidden for our containers.Our designer wants custom HTML so they can, for example, add icons, but the library only supports strings.The library does not support groups.The library comes with its own style, and we have to override a bunch of CSS style and in some cases even use the !important attribute. ( 😱 )And that’s how we looked at that moment.What we really need are non-opinionated components. Let’s create an action menu that will eliminate all the disadvantages mentioned above.We are going to use Popper.js ,which will help us with the positioning.A KICKASS LIBRARY USED TO MANAGE POPPERS IN WEB APPLICATIONSOur final result will be the The Origin DirectiveWe need to a way to identify the origin so we can attach the drop-down to it. We also need an elegant solution that listens for click events so we can toggle the The Dropdown DirectiveThe drop-down directive is our way of identifying the drop-down element so we can later pass his reference to The Action Menu ComponentThe action menu component is responsible for grabbing the origin and the…

Create Powerful Action Menu with Angular and Popper

Comments are closed, but trackbacks and pingbacks are open.