Yang memungkinkan Anda mengatur dan mengubah kelas css secara dinamis untuk elemen dom tertentu dalam sudut

Styling sangat menyenangkan. Kami sebagian besar mendefinisikan kelas CSS untuk membuat gaya dapat digunakan kembali dan konsisten. Namun, terkadang kita perlu memberi gaya pada elemen sebaris. Selain itu, kita perlu mengubah gaya sebaris secara dinamis berdasarkan status aplikasi

Pada artikel ini, kita akan melihat cara menata elemen sebaris menggunakan atribut style. Yang lebih menarik lagi, kita akan mengeksplorasi cara mengubah gaya sebaris secara dinamis di Angular menggunakan dua alat yang sangat bergaya. mengikat ke properti style, dan direktif ngStyle. Pisang keren

Anda juga dapat melihat pos kami yang lain tentang penggunaan ngClass

Daftar Isi

Gaya inline menggunakan atribut style

Atribut

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Sintaksis

<p style="background-color: mediumpurple; color: wheat; padding: 1em">
  Styled inline.
</p>

String yang ditetapkan ke atribut style berisi blok deklarasi style CSS. Blok deklarasi dapat memiliki satu atau lebih deklarasi. Setiap deklarasi adalah

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Deklarasi gaya CSS

selector {
  css-property: value;
  css-property: value;
}

Namun, saat menata inline kita tidak perlu memasang kurung kurawal untuk membuat blok. Juga, kami akan mengganti 'css-property' di atas dengan nama properti CSS yang sebenarnya

Ada banyak, banyak

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Yang paling penting, gaya sebaris menggantikan gaya dalam komponen dan lembar gaya global

Mari kita lihat sekilas stylesheet di Angular

Stylesheet dalam Angular

Angular memiliki desain modular untuk menentukan gaya. Setiap komponen memiliki stylesheet sendiri yang hanya memberi gaya pada komponen itu. Selain itu, ada lembar gaya global untuk gaya yang diterapkan ke seluruh aplikasi

Mari kita lihat contohnya

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Gaya sebaris untuk elemen

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

<some-element [style.css-property.unit]="template expression"></some-element>

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Atribut vs Properti

Sebelum kita melihat cara menata elemen secara dinamis, penting untuk menyoroti hubungan antara atribut dan properti

Tanpa terlalu banyak detail, intinya adalah, atribut digunakan dalam dokumen HTML, pada waktu pengembangan, untuk mengonfigurasi elemen HTML. Namun, atribut hanya memberikan nilai awal, misalnya warna latar belakang awal dalam atribut style kita

eBuku gratis

Arahan, sederhana kan? . Dari luar mereka terlihat sederhana, tetapi bahkan pengembang Angular yang terampil pun belum memahami setiap konsep dalam eBuku ini

• Observables dan Async Pipe
• Pemeriksaan Identitas dan Kinerja
• Komponen Web syntax
• dan Komposisi yang Dapat Diamati
• Pola Rendering Tingkat Lanjut
• Setter dan Getter untuk Style dan Class Bindings

Unduh

Itu berjalan lancar, periksa email Anda

Kita sering perlu mengubah nilai-nilai ini saat aplikasi sedang berjalan berdasarkan beberapa interaksi atau logika. Misalnya, sorot produk yang dijual dengan mengubah warna latar belakang elemen yang menampilkan produk tersebut

Perubahan dinamis dibuat dengan kode JS/TS di mana elemen HTML direpresentasikan sebagai objek dan atribut direpresentasikan sebagai properti dari objek tersebut. Oleh karena itu, untuk mengubah nilai secara dinamis, kita perlu mengubah propertinya. Misalnya, untuk mengubah gaya, kita perlu mengubah nilai properti gaya

Jika kita memeriksa tag

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

<some-element [style.css-property.unit]="template expression"></some-element>

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

<some-element [style.css-property.unit]="template expression"></some-element>

Sekarang, mari kita lihat bagaimana mengubah gaya sebaris secara dinamis di Angular

Pengikatan properti dengan "gaya"

Pengikatan properti sangat cocok saat menata hanya satu properti CSS

Sintaksis

<some-element [style.css-property.unit]="template expression"></some-element>

Contoh

<p [style.background-color]="randomColor">
  Styled with property binding!
</p>

Pertama, tanda kurung siku menunjukkan pengikatan properti dan berisi properti yang ingin kita atur dan perbarui secara dinamis

Namun, binding ke properti style terlihat sedikit berbeda dari binding properti lainnya. Ini karena properti style adalah objek itu sendiri, dengan properti CSS sebagai propertinya. Oleh karena itu, kita juga perlu menentukan properti CSS yang sebenarnya untuk ditata

Anda mungkin terkejut bahwa kita dapat menggunakan tanda hubung untuk properti CSS karena representasi JavaScript adalah camelCase. Angular memungkinkan kita menggunakan keduanya, tetapi lebih baik menggunakan dash-case karena konsisten dengan atribut style, dan juga, itulah yang biasa kita gunakan dalam deklarasi CSS dan juga karena Angular menyediakannya untuk kita

<!-- Both works -->
<!-- Prefer dash-case -->
[style.background-color]

[style.backgroundColor]

Bagian kedua dari pengikatan properti adalah ekspresi template. String yang ditetapkan ke binding adalah ekspresi template yang akan dievaluasi menjadi sebuah nilai

Dalam kasus kami, itu harus mengevaluasi nilai properti CSS yang ingin kami tetapkan ke properti CSS. Misalnya, untuk warna latar belakang, ekspresi templat dapat dievaluasi ke nilai #dda0dd

Setiap kali ekspresi template dievaluasi ke nilai yang berbeda dari sebelumnya, sistem deteksi perubahan akan menerapkan gaya baru ke tampilan

Contoh

Saatnya untuk melihat contohnya. Karena kita berbicara tentang gaya, "pas" untuk membayangkan aplikasi sederhana yang memungkinkan pengguna menelusuri rambut dan jika mereka suka, mereka bisa mendapatkannya. Kami ingin membantu pengguna dengan menunjukkan rambut yang sedang tren dan yang harganya murah

Oke, iya, ini berdasarkan lagu Ariana Grande

“Kamu suka rambutku? . Saya melihatnya, saya menyukainya, saya menginginkannya, saya mendapatkannya (Ya)”

Itu adalah lagu yang menarik

@Component({
  selector: 'hair-catalogue',
  template: `
    <hair-item *ngFor="let hair of catalogue" 
      [hair]="hair"
      [style.background-color]="hair.trending ? 'purple': 'turquoise'">
    </hair-item>
  `
})
export class HairCatalogueComponent {
  catalogue = [
    {
      description: 'Body Wave Long',
      trending: true,
      price: 65
    },
    {
      description: 'Curl Bob',
      trending: false,
      price: 40
    },
    {
      description: 'Body Wave Bang',
      trending: true,
      price: 30
    },
  ]
}

Konteks ekspresi templat

Konteks untuk ekspresi template adalah instance komponen. Artinya, ekspresi template dapat mengakses properti dan metode kelas komponen

Untuk mengilustrasikannya, mari kita terapkan logika untuk mengetahui warna latar belakang dalam sebuah metode. Kami akan menyoroti item rambut dalam tiga kategori. trending, trending dan harga murah (pembeli pasti tidak mau ketinggalan), dan tidak trending tapi murah (mungkin masih layak mendapatkannya)

bargainPrice = 30;

getBackgroundColor(hair) {
  let color = 'orange';
  if (hair.trending) {
    color = 'purple'
    if(hair.price <= bargainPrice) {
      color = 'turquoise';
    }
  } else if (hair.price <= bargainPrice) {
      color = 'gold';
    }
  return color;
}

Kita dapat memanggil metode dalam ekspresi template

<hair-item *ngFor="let hair of catalogue" 
  [hair]="hair"
  [style.background-color]="getBackgroundColor(hair)">
</hair-item>

Sekarang, mari kita lihat bagaimana Angular memudahkan kita untuk mengikat properti CSS yang memerlukan ekstensi unit

Properti unit opsional

Beberapa properti gaya CSS seperti font-size, margin, padding, width, height, dan banyak lainnya memerlukan satuan ukuran. Nilai untuk properti ini tidak lengkap tanpa unit atau gaya tidak akan berpengaruh

<p [style.font-size]="isImportant ? '3em' : '1.5em'"></p>

Angular memberi kami cara yang lebih bergaya untuk menyediakan unit. Kita dapat menentukan unit dalam pengikatan properti menggunakan notasi titik

selector {
  css-property: value;
  css-property: value;
}

Unit lainnya termasuk

<some-element [style.css-property.unit]="template expression"></some-element>

<some-element [style.css-property.unit]="template expression"></some-element>

Saat kami tidak ingin menggunakan pengikatan properti untuk gaya inline

Tidak banyak gunanya menggunakan pengikatan properti untuk mengikat ke string statis

selector {
  css-property: value;
  css-property: value;
}

Gunakan atribut style jika nilainya tidak diharapkan berubah. Lebih baik lagi, kita bisa meletakkan gaya di stylesheet, bukan inline

selector {
  css-property: value;
  css-property: value;
}

Menata beberapa properti gaya CSS sebaris

Pengikatan properti memungkinkan kita mengikat ke satu properti pada satu waktu sehingga cocok untuk menata satu properti pada sebuah elemen

Jika kita ingin menata beberapa properti CSS

selector {
  css-property: value;
  css-property: value;
}

Saatnya menggunakan direktif

<some-element [style.css-property.unit]="template expression"></some-element>

Arahan NgStyle Angular

Gunakan direktif NgStyle untuk secara dinamis menata beberapa properti CSS dari suatu elemen

Sintaksis

selector {
  css-property: value;
  css-property: value;
}

ngStyle diterapkan sebagai atribut ke elemen. Tanda kurung siku di sekitar direktif menunjukkan bahwa direktif NgStyle memiliki properti input yang juga disebut ngStyle. Ini adalah pola umum untuk mendefinisikan direktif dan mengikat properti inputnya secara bersamaan. Inilah cara kami meneruskan informasi gaya kami ke direktif ngStyle

selector {
  css-property: value;
  css-property: value;
}

Untuk mengetahui nilai apa yang diharapkan oleh properti input, mari kita lihat bagaimana Angular mengimplementasikannya

selector {
  css-property: value;
  css-property: value;
}

Seperti yang kita lihat ngStyle mengharapkan objek dengan pasangan kunci dan nilai. Kuncinya adalah nama properti CSS dan nilainya adalah ekspresi yang mengevaluasi nilai properti CSS

Berikut adalah beberapa cara kita dapat meneruskan gaya sebagai masukan

1. Sebagai objek literal

selector {
  css-property: value;
  css-property: value;
}

1. Tentukan properti di kelas komponen kami untuk gaya

selector {
  css-property: value;
  css-property: value;
}

1. Panggil metode di kelas komponen kami yang mengembalikan objek dengan gaya

selector {
  css-property: value;
  css-property: value;
}

Sebagai catatan tambahan, dan hanya untuk penyelesaian, secara opsional kita dapat menggunakan camelCase untuk kunci, dalam hal ini kita tidak perlu memasukkannya ke dalam string.

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Namun, untuk menggunakan properti satuan opsional, kita harus menyediakan kunci dalam string

@Component({
  selector: 'app-root',
  styles: [`
    p {
      padding: 1em;
      background: black;
      color: snow;
  }
  `],
  template: `
    <p style="background-color:mediumpurple;color:wheat" #pRef>
      Styled inline!
    </p>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('pRef') pRef: ElementRef;

  ngOnInit() {
    console.log(this.pRef);
  }
}

Penting untuk konsisten

Jadi, begitulah. Gunakan pengikatan properti untuk menata satu properti CSS dari suatu elemen dan gunakan direktif ngStyle untuk menyetel beberapa properti CSS. Kedua alat membuatnya sangat mudah untuk menata elemen secara dinamis

Untuk mempelajari lebih banyak teknik, praktik terbaik, dan pengetahuan pakar dunia nyata, saya sangat merekomendasikan untuk memeriksa kursus Angular saya - mereka akan memandu Anda melalui perjalanan Anda untuk menguasai Angular sepenuhnya

Bagaimana cara mengatur kelas CSS secara dinamis di Angular?

Bagaimana cara mengubah kelas CSS di Angular?

Bagaimana cara menerapkan kelas dinamis di Angular?

Manakah dari berikut ini yang memungkinkan kita menambahkan CSS ke elemen DOM di Angular?