I work with a design team on a product, and we're using Material Guidelines to design components like popovers. Simple stuff. Angular Material https://material.angular.io/ does offer some fundamental components, however it lacks a lot. Material-Ui.org (which is for React only) offer much more in terms of component selection and customization capabilities.

What are we missing in Angular Material and how to work around it ? For example, I need to implement a popover, something superbly simple with material-ui.org, but unachievable with standard angular.material library.

My initial plan is to look at how popover is implemented in bootstrap and other libraries that offer it for Angular framework and try to copycat it. Is this the only way ?

CodePudding user response：

https://material.angular.io/components/tooltip/overview

I believe what you are looking for in Angular material is a tooltip. A lot of different ways it can be styled to be more like a popover

CodePudding user response：

Popover Options

You actually have a lot of options, here are some:

• Use Angular Material Tooltips as Rhet mentioned

• Add Ng-Bootstrap to your project like you already mentioned

  ng add @ng-bootstrap/ng-bootstrap

• Add Helipopper which is a highly configurable library specific for all types of popovers

  npm install @ngneat/helipopper @ngneat/overview

  Here are some more examples in a Stackblitz.

• Create your own implementation

  Here is a basic example in another Stackblitz.

If you have a design team and the design might evolve over time (which good UX does), I would take the time to build your own implementation. If however you are expected to get it done quick, rather than control every aspect, pick any of the other options.