Angular – jak zmienić styl CSS rodzica w reakcji na zdarzenie na dziecku?

Obłaskawiania Angulara ciąg dalszy (po tym problemie). Tym razem chciałbym zmienić styl CSS rodzica elementu, jeśli na tym elemencie zostało wywołane jakieś zdarzenie.

Kod online:
https://stackblitz.com/edit/angular-3tyk9k?file=src%2Fapp%2Fapp.component.html (może już StackBlitz będzie działać, nie jak ostatnio)

app.component.html:

<div id="container">
	<select>
    <option *ngFor="let option of options" [selected]="initialSelectedIndex">
      {{ option }}
    </option>
  </select>
</div>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = [
    "apple",
    "banana",
    "cucumber"
  ];
  initialSelectedIndex = 2;
}

I powiedzmy: chciałbym ustawić właściwość CSS background-color dla elementu o ID container na wartość blue, kiedy na elemencie <select> zostanie wywołane zdarzenie change.

W czystym JavaScripcie zrobiłbym to na przykład tak:

<div id="container">
  <select onchange="document.getElementById('container').style.backgroundColor = 'blue'">
    ...
  </select>
</div>

A jak to zrobić w Angularze?

UPDATE: W zasadzie w Angularze działa sposób z onchange. Wcześniej próbowałem jedynie (change), dopiero teraz przyszło mi do głowy, by spróbować tak. Hm.

Pytanie więc trochę zmienione: czy jest jakiś bardziej "angularowy" sposób? W szczególności by było możliwe two-way data binding?

UPDATE2: Jednak działające rozwiązanie muszę odrzucić – zmienna, która u mnie przechowuje wartość stylu, który ma zostać zmieniony, istnieje tylko dla Angulara (nie dla zwykłego JavaScriptu). Być może mógłbym to obejść, ale wolałbym nie tworzyć bez specjalnej potrzeby nowych zmiennych czy funkcji... Ogólnie – wolałbym nie "obchodzić" Angulara. Tak więc problem w całej okazałości aktualny.

UPDATE3: przepraszam, ale zepsułem kod online (wykreśliłem link). Przyzwyczajenie wzięło górę – StackBlitz nie tworzy nowych linków po każdym zapisaniu (jak np. JSFiddle), więc odruchowo zapisując, zmieniłem kod, a cofnąć już się nie da.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div id="container" [class.blue]="blue">
     <select (change)="changeBackground()">...</select>
  </div>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = [
    "apple",
    "banana",
    "cucumber"
  ];
  initialSelectedIndex = 2;

  blue = false;

  changeBackground() {
       this.blue = true;
  }
}

lub

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div id="container" [ngClass]="blue">
     <select (change)="changeBackground()">...</select>
  </div>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = [
    "apple",
    "banana",
    "cucumber"
  ];
  initialSelectedIndex = 2;

  blue = '';

  changeBackground() {
       this.blue = 'blue';
  }

}

w stylach:

.blue { background-color: blue; }

@lookacode1: to bardziej zaawansowana składnia niż ja obecnie używam, jak widzę. Dziękuję Ci, być może przyda mi się w przyszłości. Jest chyba bardziej generyczne – a ja lubię generyczność. :)

Jednak właśnie przed chwilą doszedłem do innego rozwiązania. :/ To znaczy, cieszę się, ale trochę wychodzi, jakbyś napisał na marne.

Nie wiem, czy moje rozwiązanie jest lepsze (może ocenisz?). Wygląda to tak:

app.component.html:

<div #container id="container">
  <select (change)="container.style.backgroundColor = 'blue'">
    <option *ngFor="let option of options" [selected]="initialSelectedIndex">
      {{ option }}
    </option>
  </select>
</div>

Dla innych: posiłkowałem się źródłem https://angular.io/guide/template-syntax#template-reference-variables-var

Wolę swoje rozwiązanie, bo jest prostsze dla mnie obecnie. Nie chciałbym już kombinować; byleby działało.

UPDATE: W moim docelowym projekcie wydaje się działać to rozwiązanie. Niemniej martwi mnie trochę – bo nie znalazłem informacji o tym – jaki zakres ma zmienna #container. W tym przykładzie działa również na rodzicu, jak sprawdzałem (dodałem nowy element <div> jako rodzica elementu o ID container)...