Angular – Wie man in einer Child Component den Style einer Parent Component anpassen kann

Da war es wieder – mein wiederkehrendes Angular-Problem: Wie kann ich aus einer Child-Component heraus eine Parent-Component per Style beeinflussen? Hier eine einfache Lösung.

Möchte man beispielsweise ein Element in einer Parent-Componente ausblenden, wenn die Child-Component geladen wird, so ist das per Stylesheet in der Child-Component nicht möglich. Das geht nur in die andere Richtung.
Man kann aber eine CSS Klasse an den Body hängen und dann entsprechend in der Parent-Component darauf reagieren.

CSS Klasse an den Body hängen

import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {DOCUMENT} from '@angular/common';

@Component({
  selector: 'app-child',
  templateUrl: 'child.component.html'
})
export class ChildComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit() {
    this.document.body.classList.add('hide-something-in-parent');
  }
}

Auf die Klasse reagieren

Nun können wir im Main-Stylesheet der Anwendung schauen, ob die Klasse am Body enthalten ist, um dann entsprechend etwas mit einem Element irgendeiner Komponente zu machen.
In diesem Beispiel wollen wir ein Element mit der Klasse .parent-element ausblenden.

body.hide-something-in-parent .parent-element {
  display: none;
}

CSS Klasse wieder vom Body entfernen

Nun wollen wir das ausgeblendete Element auch wieder anzeigen, wenn die Child-Component nicht mehr aktiv ist.
Das könnte man über Route-Parameter machen oder noch einfacher über das Interface OnDestroy der Komponente.

@Component({
  selector: 'app-child',
  templateUrl: 'child.component.html'
})
export class ChildComponent implements OnInit, OnDestroy {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit() {
    this.document.body.classList.add('hide-something-in-parent');
  }
  
  ngOnDestroy(): void {
    this.document.body.classList.remove('hide-something-in-parent');
  }
}

Wird die Komponente erzeugt, schreiben wir die Klasse an den Body, wird sie zerstört, entfernen wir die Klasse wieder.
Und das war es auch schon.
Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.