css - Angular 5 と :host 疑似クラス

Question

Angular 4 で :host 疑似クラスを問題なく使用しています。Angular 5 に変換していますが、スタイルがホスト コンポーネントに追加されていないようです。Angular の新しいバージョンでこれを追加する別の方法はありますか?

:host {
  border: 10px solid black;
  &.isLeft {
    display: flex;
  }
}

@media (max-width: 599px) {
  :host {
    display: flex;
  }
}

isLeft クラスは、親コンポーネントからコンポーネントに渡されるパラメータに基づいて設定されます。これは、この特定のコントロールを 2 つの異なる形式で表示でき、そのうちの 1 つがレスポンシブであるためです。コンポーネント内には、次のコードがあります。

  @HostBinding('class.isLeft') isLeft: boolean; 

  @Input()
  placement: string = 'responsive';

  ngOnInit() {
    this.isLeft = (this.placement.toLowerCase() === 'left');
  }

このすべてを行うために @HostBinding を使用するという提案があることは知っています。まず第一に、メディア クエリを使用する必要がある場合に、それがどのように機能するかわかりません。第二に、これで @HostBinding を使用する唯一の方法は、コンポーネント内にスタイリングを含めることであり、これは当社の基準に反します。

前もって感謝します！