Angular material popover

Updated April 4, 2023

Introduction to Angular material popover

Popover is basically a tooltip that gets displayed when we hover over any text element or button, it can be anything. Also, we can display our text or title on this popover which is also known as a tooltip in angular material. The material provides us with a build library and module which can be directly used to create the popover or tooltip in angular material. It is very easy to use, maintain and implement. It is very useful when we want to display particular short information to the user for anything, also they consider providing a hint to the user. We can display them when a user hives over the text, button or element, and ask them to perform any action after that. In the coming section of the tutorial, we will see how we can use the existing martial module to implement our popover in the martial application very easily and quickly.

Syntax:

As we will be going to use the material in the build module to create our very first popover or tooltip inside the application but before that let’s have a closer look at the syntax for this in order to use it correctly, let’s get started to see below;

<button mat-raised-button
matTooltip="your text">
click
</button>

As you can see in the above syntax we are trying to use the ‘matTooltip’ which helps us to show our text when we try to click or hover over the button element. In order to use this property, we require to add the required dependency and package in the module file, in detail we will see in the coming sectioned article.

How does popover work in Angular material?

As of now we already know that we can use a tooltip in place of popover in angular material which helps us to show the text on the hover over or the click. We can use this to show extra information to the user. It is very easy to use and implement by the developers. In this section we will see how we can configure inside the angular application using the material library, let’s get started to see below;

1) MatTooltipModule: This module needs to import inside the root module or any of the child modules in which we want to implement this functionality. For reference please see the below code attached, and paste inside the root module file of your application see below;

e.g. :

import {MatTooltipModule} from '@angular/material/tooltip';

2) MatTooltip: This is the directive that we can use inside any text or button which helps us to show the text on hover over and also we can use this directly on any of the elements. Also, we have attached one reference code which will help you to show the text on hover see below;

e.g. :

Selector: [matTooltip]
Exported as: matTooltip

This directive comes p with many properties with it, out of which some of them are described below ;

1. a) position: by this, we can define the position of our popover.
2. b) show delay: default delay after the show is called.
3. c) message: used to display the message on the tooltip or popover.

Now we will see what are steps needed to take in order to set up a material project from scratch, you can also install the material library inside the angular project by running the last point command on the command prompt, let’s gets started with the steps see below;

1) This is the first step that will help us to install the Angular CLI for our application we can download it by using the below command. Also, this will help us to run our project, build it, and so on. Follow below code

e.g. :

npm install -g @angular/cli

2) Once the CLI is installed then we can start creating the angular application, for this we have to follow the below command. This command will help us to create the angular project from scratch but it will not contain the martial that is separate;

e.g. :

ng new your project name

>> ng new my-first-project

suitable name for your project  ‘my-first-project’

3) It is the time to install the required dependency inside the project just run the below command in order to have npm module package in place in our project,

e.g. :

npm install

4) Run the application by executing the below command;

e.g. :

ng serve

5) Changes will appear on the below URL, as we know that the default port for angular application is 4200, just run on the browser to see the changes;

e.g. :

http://localhps:4200

6) Install material library inside the project and start implementing the popover inside the application;

e.g. :

ng add @angular/material

Example

1) index.html code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="mat-app-background basic-container">
<demo-popover>loading ..</demo-popover>
</div>

2) demo-popover.componenet.ts code :

import {Component} from '@angular/core';
import {TooltipPosition} from '@angular/material';
import {FormControl} from '@angular/forms';
@Component({
selector: 'demo-popover',
templateUrl: 'demo-popover.componenet.html'
})
export class DemoPopover {
posotionDemo: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
position = new FormControl(this.posotionDemo[0]);
}

3) demo-popover.componenet.html code :

<h4>Demo Popover using Angular Material</h4>
<button mat-raised-button
matTooltip="Hi !! I am popover !!!"
aria-label="Basic popover !!">
Hover Over !!
</button>
<br/>
<br/>
<h4> To set the position </h4>
<mat-form-field class="example-user-input">
<mat-select placeholder="Tooltip position" [formControl]="position">
<mat-option *ngFor="let po of posotionDemo" [value]="po">
{{po}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button
matTooltip=" Position setting Demo !!"
[matTooltipPosition]="position.value"
aria-label=" Label for position !!">
Position Button
</button>

4) moduel.ts code :

import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {
MatTooltipModule,
} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {BasicTooltip} from './app/tooltip/basictooltip';
@NgModule({
exports: [
MatTooltipModule,
]
})
export class DemoModule {}

Output :

Change position to see the effect.

Conclusion

As we know popovers is very easy to create and show some extra information to the user about the functionality. Also, it can easily be created inside the angular application using a material tooltip module, which is easy to use, readable and maintainable as well by the developers.

Recommended Articles

This is a  guide to Angular material popover. Here we discuss How does popover work in Angular material along with the examples and outputs. You may also have a look at the following articles to learn more –

1. Scope in AngularJS
2. Angular Material Icons
3. Angular CLI
4. AngularJS ng-model