Δέσμευση CSS στυλ στο Angular

Στο Angular μπορούμε επίσης να προσθέτουμε απευθείας στυλ για ένα μπλοκ. Αυτό γίνεται χρησιμοποιώντας ένα χαρακτηριστικό της ετικέτας, γραμμένο στην ακόλουθη μορφή:

[style.styleProperty]="property value"

Σε αυτήν την περίπτωση, τα ονόματα των ιδιοτήτων CSS που περιέχουν παύλα εντός τους, στη δική μας περίπτωση θα γράφονται σε camelCase. Ας δούμε με παραδείγματα πώς λειτουργεί αυτό.

Παράδειγμα

Ας ορίσουμε το φόντο σε ένα στοιχείο:

<div [style.backgroundColor]="'blue'">
	κείμενο
</div>

Παράδειγμα

Ας υποθέσουμε ότι έχουμε κάποια ιδιότητα που περιέχει το χρώμα του φόντου:

export class AppComponent {
	public value: string = 'red';
}

Ας εφαρμόσουμε αυτήν την ιδιότητα ως τιμή για το στυλ:

<div [style.backgroundColor]="value">
	κείμενο
</div>

Παράδειγμα

Ας υποθέσουμε ότι έχουμε κάποια δυαδική λογική ιδιότητα:

export class AppComponent {
	public isActive: boolean = true;
}

Θα δέσμευουμε διαφορετικές τιμές στην ιδιότητα CSS ανάλογα με το περιεχόμενο της δυαδικής ιδιότητας. Θα χρησιμοποιήσουμε για αυτό τον τελεστή υπό συνθήκη (ternary operator):

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	κείμενο
</div>

Πρακτικές Ασκήσεις

Δίνεται ένα μπλοκ. Κάντε έτσι ώστε το πρώτο κλικ στο μπλοκ να το βάφει κόκκινο, και το δεύτερο κλικ - πράσινο.

Δίνεται ένα μπλοκ. Δίνεται ένα κουμπί. Κάντε έτσι ώστε το πάτημα του κουμπιού να αυξάνει το πλάτος του μπλοκ επί διπλάσιο.