Manchmal ist es nötig eine Klasse dynamisch auf das Host Element einer Komponente zu setzen. Das lässt sich relativ einfach mit dem @HostBinding Decorator umsetzen.

In diesem Beispiel soll eine „iframe“ Klasse gesetzt werden, wenn die Seite über einen iframe eingebunden ist. Falls nicht, soll die Klasse auch nicht gesetzt werden.

@Component({
   selector: 'app-root',
   templateUrl: 'app.component.ts'
})
export class AppComponent implements OnInit {
  @HostBinding('class.iframe') iframe: boolean = false;

  constructor() {
  }

  ngOnInit() {
    this.iframe = ((window as any).location !== (window as any).parent.location);
  }
}

Sofern this.iframe gleich true ist, würde der HTML Code in etwa so aussehen:

<app-root class="iframe">
  ...
</app-root>

Im CSS Code kann übrigens mit dem :host Pseudo-Selektor auf das Host Element der Komponente zugegriffen werden.

:host(.iframe) {
  border: 5px solid red;
}

Das war auch schon alles. Sollte es dazu noch Fragen geben, bitte einfach in die Kommentare schreiben. Ich beantworte diese gerne.