Угловой материал применяет класс к внутреннему элементу вместо навигации на верхнем уровне ⇐ Html

[Anonymous]

Я использую Angular Mapern's в моем угловом приложении, и мне нужно динамически применить обрушенный класс, когда боковая панель минимизирована.
Проблема :
Несмотря на то, что в моем шаблоне есть только один , когда я осматриваю DOM в Chrome Devtools, я замечаю, что несколько уровней Существуют в визуализированном коде (вероятно, из -за углового материала, обертывающего его внутренне).
В результате my ngclass = "{'coupplapsed': iscollapsed}" только применяется Внутренний , но не верхний элемент, где он мне нужен.
Текущий код:
Шаблон: < /p>

Код: Выделить всё

{{ isCollapsed ? 'chevron_right' : 'chevron_left' }}






{{ item.label }}




< /code>
component.ts
export class SidebarComponent {
isCollapsed = false;
}
< /code>
Что я попробовал: < /p>

[*] Применение [ngclass] к → это относится только к внутреннему вложенному  

, а не навигация верхнего уровня.
Осмотр хромированных девтообол → Я вижу дополнительные обертки Div вокруг , которые являются Внедрено угловым материалом внутри. . < /li>
< /ol>
Ожидаемое поведение:
Я хочу, чтобы с коллапсованным классом был применен к верхнему уровню < /code>, чтобы я мог правильно его свернуть и стиль. экземпляр?

Подробнее здесь: https://stackoverflow.com/questions/794 ... of-top-lev