Design languages like Material Design provide building blocks to developers, helping us create nice looking and intuitive designs. You can find any type of components from simple buttons and cards to date pickers and complex data tables. It covers most needs of a developer, but I was recently faced with a UX requirement for which I couldn’t find any fitting component, even with a bit of customisation.

I wanted to show some extra information in a card when the user clicks on an “info” icon:

This panel should close if the user clicks outside of it and stay positioned relatively to its label, even if the user scrolls down. We also want to be able to embed components in the popup, not only display text. One solution could be built using the overlay package of the CDK.

If you only need the final solution you can check this repo. We are going to go into the main points of the implementation in this article.

Setup

If you are already using Angular Material in your project, you are set up and can skip this section. If not, you have two options:

• Install and setup the Angular Material CDK only
• Install and setup Angular Material (recommended for our example)

Install and setup the Angular Material CDK

You don’t have to install the complete Angular Material package to use the overlay package. However, for the info popups of this example we are going to need the MatIcon and MatCard components from Angular Material. But you can technically replace these components respectively by another icon and a self-made card so you can install the CDK on its own:

npm i @angular/cdk --save

and import the following line in your global styling:

@import '~@angular/cdk/overlay-prebuilt.css';

Install and setup Angular Material

As we are going to use MatCard and MatIcon in the example, this is the recommended option if you want to code along. You can find a complete guide here, but for a fast setup simply run:

ng add @angular/material

and make sure that BrowserAnimationsModule is imported in your app.module.ts.

NB: As already mentioned, we will need the _MatCardModule_ and_MatIconModule_. As you are in your _app.module.ts_, you can already import them now.

#angular-material #javascript #angular