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.

Vorheriger ArtikelNächster Artikel
Daniel Kiesel ist ein freier Softwareentwickler aus der Region Karlsruhe und unterstützt Unternehmen und deren Teams bei der Entwicklung von Softwareprodukten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.