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.