Как установить высоту для хост-элемента, а не для класса @media (для того же элемента)

Question

У меня есть навигационная панель, которая будет отображаться только в версиях для настольных компьютеров / ноутбуков, а не в мобильных версиях.

:host{
height:auto;
display:block;
}

@media(max-width: 768px)
{
:host
{
background:none;
height:auto;
padding: 0 10 10px 0;
}
}

Проблема в том, что мне нужно установить минимальную высоту для элемент host, который не должен отражать, если пользователь находится в мобильном представлении. Я попытался установить как показано ниже в файле component.ts (ngAfterViewInit)

document.getElementById('left-nav').style.minHeight = window.innerHeight + 'px';

Но это не работает, когда пользователь просматривает в мобильном телефоне. При просмотре в мобильной версии он должен установить min-height как «auto», а в других версиях «window.innerHeight»

Может кто-нибудь предложить предложение по этой проблеме?

Answer 1

Попробуйте использовать этот метод.

:host(.special-custom-element) {
  //styles here
}

Answer 2

 if (window.matchMedia('(max-width: 768px)').matches) {
     Code here for mobile view
}