Использование макета Flex в пределах Angular [innerHTML]

Question

Я пытаюсь использовать Angular Flex Layout внутри внутреннего HTML, но результат не отображается в браузере правильно. Я знаю, что маршрутизация не работает во внутреннем HTML из-за использования привязок Angular, так что это может быть то же самое?, Но я нигде не могу найти документацию по этому конкретному варианту использования c. Я ожидал, что Flex Layout должен работать, поскольку другие сеточные системы, такие как Bootstrap, похоже, отображаются правильно.

Боковое примечание: я понимаю, что Bootstrap работает, поскольку он применяет классы, но я хотел бы использовать макет Flex, поскольку я уже использую макет Flex в других местах в моем проекте.

HTML:

<div [innerHTML]="myFlexLayout | safeHtml"></div> <!-- safeHtml is a pipe that uses bypassSecurityTrustHtml -->

TS:

this.myFlexLayout =  '<div fxFlex="75" fxLayout="row">
    <div fxFlex="50">col 1</div>
    <div fxFlex="50">col 2</div>
  </div>'

РЕЗУЛЬТАТ: визуализируется без применения flexbox (т.е. fxflex вместо fxFlex, и стиль не применяется):

<div fxflex="75" fxlayout="row">
  <div fxflex="50">col 1</div>
  <div fxflex="50">col 2</div>
</div>

Есть ли способ визуализировать макеты flexbox внутри Html?

Дайте мне знать, если у вас есть какие-либо мысли!