Displaying HTML as Text in FlexGrid Cell Tooltips in Angular

August 06 2026

Background

When using Wijmo FlexGrid with the Tooltip class, you may need to display cell values that contain HTML-like text, such as: abc <123 test text> lmn or <span>Review Required</span>.

By default, Wijmo tooltips treat their content as HTML. Because of this, text inside angle brackets may be interpreted as markup instead of being displayed as plain text. For example, abc <123 test text> lmn may appear in the tooltip as abc lmn.

Steps to Complete

Install the required Wijmo packages.
Import the FlexGrid Angular module and Tooltip class.
Create sample grid data that contains HTML-like text.
Create a Tooltip instance and set isContentHtml to false.
Assign the cell value to the tooltip in the FlexGrid formatItem event.
Add the FlexGrid markup.

Getting Started

Install the required Wijmo packages

npm install @mescius/wijmo @mescius/wijmo.grid @mescius/wijmo.angular2.grid @mescius/wijmo.styles

The wijmo.angular2.grid package provides the Angular FlexGrid components. The @mescius/wijmo package provides the Tooltip class, and wijmo.styles provides the required Wijmo CSS.

Import the FlexGrid Angular module and Tooltip class

import { Component, OnDestroy } from '@angular/core';
import { Tooltip } from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';

import { getData } from './data';

These imports allow you to render a FlexGrid in Angular and attach Wijmo tooltips to individual grid cells.

Create sample grid data that contains HTML-like text

export function getData() {
  const countries = 'US,Ger<ma>ny,UK,Ja<pa>n,Italy,Greece'.split(',');
  const notes = [
    'abc <123 test text> lmn',
    '<span>Review Required</span>',
    '<strong>High Priority</strong>',
    'Display <all content> as text'
  ];

  const data = [];

  for (let i = 0; i < 200; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      note: notes[i % notes.length],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  return data;
}

The country and note fields include values with angle brackets so you can confirm that the tooltip displays the original text instead of parsing it as HTML.

Create a Tooltip instance and set `isContentHtml` to `false`

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [WjGridModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  data = getData();

  private tooltip = new Tooltip();

  constructor() {
    this.tooltip.isContentHtml = false;
  }

  ngOnDestroy(): void {
    this.tooltip.dispose();
  }
}

The isContentHtml property controls whether tooltip content is interpreted as HTML. Setting it to false tells the Tooltip control to display the content as plain text.

Assign the cell value to the tooltip in the FlexGrid `formatItem` event

formatItem(grid: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs): void {
  if (e.panel === grid.cells) {
    const value = e.panel.getCellData(e.row, e.col, true);
    this.tooltip.setTooltip(e.cell, value != null ? String(value) : '');
  }
}

The formatItem event runs when FlexGrid renders a cell. The code gets the formatted cell value and assigns it as the tooltip content.
Because isContentHtml is set to false, values such as <span>Review Required</span> or abc <123 test text> lmn appear exactly as written in the tooltip.

Add the FlexGrip markup

<wj-flex-grid
  #theGrid
  class="tooltip-grid"
  [itemsSource]="data"
  [autoGenerateColumns]="false"
  [showSort]="true"
  (formatItem)="formatItem(theGrid, $event)"
>
  <wj-flex-grid-column [binding]="'id'" [header]="'ID'" [width]="70"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'country'" [header]="'Country'" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'note'" [header]="'Note'" [width]="'2*'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'downloads'" [header]="'Downloads'" [format]="'n0'" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'" [format]="'c0'" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [format]="'c0'" [width]="'*'"></wj-flex-grid-column>
</wj-flex-grid>