компонент внутри ячейки таблицы материалов не отображается правильно

Question

Вот STACKBLITZ , показывающий проблему.

Я хочу иметь индикатор прогресса материала внутри моей таблицы материалов.

Версия 1

• все работает как положено

Версия 2

• Col: Name, где я использую mat-progress-bar, напрямую работает
• Col: Symbol, где я использую компонент с mat-progress-bar, не работает.

Вопросы:

• Почему версия 2 не работает должным образом?
• Это ошибка?

(я хочу использовать Version2, потому что у меня есть CSS-стили, которые CENTER мои столбцы, поэтому таблица выглядит хорошо.)

Answer 1

Похоже на проблему css.

Добавление width: 100% в тег пользовательского компонента должно быть достаточно здесь:

@Component({
  selector: 'newComp',
  styles: [`
    :host {
      width: 100%;
    } 

  mat-progress-bar { height: 2em;}
  `],
  template: `...`,

})
export class newComp {

Forked Stackblitz