Можно ли иметь список внутри подсказки углового материала?

Question

По сути, я хотел бы иметь элемент ul внутри моей подсказки.

Я использую Angular 5 и совместимый материал для Angular 5.

Answer 1

Комментарий Павла Агаркова в правильном направлении. Чтобы упростить задачу, создайте пользовательский канал, чтобы автоматизировать преобразование текста в маркированные элементы списка. Канал отвечает за добавление маркеров и перевода строки, которые будут отформатированы классом CSS:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'tooltipList' })

export class TooltipListPipe implements PipeTransform {

  transform(lines: string[]): string {

    let list: string = '';

    lines.forEach(line => {
      list += '• ' + line + '\n'; 
    });

    return list;
  }
}

Определите CSS в соответствии с предложением Павла - и не забудьте добавить его в свою глобальную таблицу стилей:

.tooltip-list {
  white-space: pre;
}

И передайте массив строк, представляющих элементы списка, в MatToolip с помощью пользовательского канала и примените класс к всплывающей подсказке:

<span
    [matTooltip]="['Wash car','Get a haircut','Buy milk'] | tooltipList" 
    matTooltipClass="tooltip-list">
  TODO List (hover)
</span>

Вот на StackBlitz: https://stackblitz.com/edit/angular-o9sfai?file=styles.css