Angular Material — Tooltips and Tree Display

Angular Material is a popular UI framework based on Material Design for Angular.

In this article, we’ll look at how to use Angular Material into our Angular project.

Tooltips

We can add tooltips with Angular Material.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTooltipModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div class="example-container" cdkScrollable>
  <button mat-raised-button #tooltip="matTooltip"
    matTooltip="Info about the action" matTooltipPosition="below"
    matTooltipHideDelay="100000"
    class="example-button">
    Action
  </button>
</div>

We add the tooltip by adding the matTooltip directive to the button.

matTooltipHideDelay sets the delay to hide the tooltip.

matTooltipPosition sets the position of the tooltip. Its value can be 'below' , 'above' , 'left' or 'right' .

Tooltip Class

We can set the tooltip class with the matTooltipClass attribute.

For example, we can write:

app.component.html

<div class="example-container" cdkScrollable>
  <button mat-raised-button #tooltip="matTooltip"
    matTooltip="Info about the action" matTooltipPosition="below"
    matTooltipClass="example-tooltip-red" matTooltipHideDelay="100000"
    class="example-button">
    Action
  </button>
</div>

styles.css

.example-button {
  margin-top: 16px;
}

.example-tooltip-red {
  background: #b71c1c;
}

We add the matTooltipClass attribute and set the styles for the tooltip in styles.css .

Tree

The mat-tree component lets us add a tree display to our app.

For example, we can write:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTreeModule } from '@angular/material/tree';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTreeModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { FlatTreeControl } from '@angular/cdk/tree';
import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';

interface FoodNode {
  name: string;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    children: [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Fruit loops' },
    ]
  }, {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [
          { name: 'Broccoli' },
          { name: 'Brussels sprouts' },
        ]
      }, {
        name: 'Orange',
        children: [
          { name: 'Pumpkins' },
          { name: 'Carrots' },
        ]
      },
    ]
  },
];

interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  private _transformer = (node: FoodNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
    };
  }

  treeControl = new FlatTreeControl<ExampleFlatNode>(
    node => node.level, node => node.expandable);

  treeFlattener = new MatTreeFlattener(
    this._transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}

app.component.html

<div>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
      <button mat-icon-button disabled></button>
      {{node.name}}
    </mat-tree-node>
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle
        [attr.aria-label]="'Toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? '&#8595;' : '&#8594;'}}
        </mat-icon>
      </button>
      {{node.name}}
    </mat-tree-node>
  </mat-tree>

</div>

We add the MatTreeModule to let us add the tree display.

And the MatButtonModule lets us add the button for the tree nodes.

In app.component.ts , we add the treeControl variable that we use with the treeControl directive to bind to the mat-tree .

This way, we can manipulate the tree.

dataSource is created from the MatTreeDataSource constructor.

We also need the hasChild method to let Angular Material check if there are any child nodes in the tree.

In the button, we check is the node is expanded with the treeControl.isExpanded method.

Then we can change the tree node display accordingly.

Conclusion

We can add tooltips and a tree display with Angular Material.