Menggunakan ngStyle Pada Angular 4

Di panduan kali ini saya akan kembali memberikan bahan mengenai angular 4 yaitu,Â Menggunakan ngStyle Di Angular 4.Â setelah di pembahasan sebelumnya kita telah membahas mengenai Data binding di angular 4.

Di angular 2 & 4 ngStyle ialah sebuah directive yang betul-betul bermanfaat bagi memberikan style di DOM dengan cara dinamis, Â Diantara cara bagi mengatur gaya ialah dengan menggunakan command NgStyle dan menugaskannya secara literal, seperti ini :

<div [ngStyle]=”{‘background-color’:’green’}”></<div>

1	<div [ngStyle]=“{‘background-color’:’green’}”></<div>

Dengan sintak di atas akan memberikan warna hijau di element DIV.

ngStyle menjadi jauh lebih bermanfaat bila nilainya dinamis. Nilai pada objek literal yang kita tetapkan bagi ngStyle dapat berupa ekspresi javascript yang dievaluasi dan hasil dari ungkapan tersebut digunakan selaku nilai dari properti css, seperti ini:

<div [ngStyle]=”{‘background-color’:person.country === ‘UK’ ? ‘green’ : ‘red’ }”></<div>

1	<div [ngStyle]=“{‘background-color’:person.country === ‘UK’ ? ‘green’ : ‘red’ }”></<div>

Kode di atas menggunakan operator terner bagi mengatur warna latar belakang menjadi hijau sekiranya negara orang tersebut ialah orang Inggris yang lain berwarna merah. Tetapi ungkapannya(expression) tak mesti inline, kita dapat memanggil guna di komponennya. Bagi menunjukkan ini memungkinkan menyempurnakan contoh komplit. Mirip dengan yang telah kami bikin sebelumnya, mari kita lalui lewat serangkaian orang dan cetaklah dengan nama pada bermacam warna tergantung dari negara asal mereka

@Component({<br />
  selector: ‘ngstyle-example’,<br />
  tema: `<h4>NgStyle</h4><br />
<ul *ngFor=”let person of people”><br />
  <li [ngStyle]=”{‘color’:getColor(person.country)}”> {{ person.name }} ({{ person.country }})<br />
  </li><br />
</ul><br />
 `<br />
})<br />
class NgStyleExampleComponent {</p>
<p>  getColor(country) {<br />
    switch (country) {<br />
      case ‘UK’:<br />
        return ‘green’;<br />
      case ‘USA’:<br />
        return ‘blue’;<br />
      case ‘HK’:<br />
        return ‘red’;<br />
    }<br />
  }</p>
<p>  people: any[] = [<br />
    {<br />
      “name”: “Douglas  Pace”,<br />
      “country”: ‘UK’<br />
    },<br />
    {<br />
      “name”: “Mcleod  Mueller”,<br />
      “country”: ‘USA’<br />
    },<br />
    {<br />
      “name”: “Day  Meyers”,<br />
      “country”: ‘HK’<br />
    },<br />
    {<br />
      “name”: “Aguirre  Ellis”,<br />
      “country”: ‘UK’<br />
    },<br />
    {<br />
      “name”: “Cook  Tyson”,<br />
      “country”: ‘USA’<br />
    }<br />
  ];<br />
}

@Component({

selector: ‘ngstyle-example’,

tema: `<h4>NgStyle</h4>

<li [ngStyle]=“{‘color’:getColor(person.country)}”> {{ person.name }} ({{ person.country }})

</li>

</ul>

})

class NgStyleExampleComponent {

getColor(country) {

switch (country) {

case ‘UK’:

return ‘green’;

case ‘USA’:

return ‘blue’;

case ‘HK’:

return ‘red’;

}

people: any[] = [

{

“name”: “Douglas Pace”,

“country”: ‘UK’

{

“name”: “Mcleod Mueller”,

“country”: ‘USA’

{

“name”: “Day Meyers”,

“country”: ‘HK’

{

“name”: “Aguirre Ellis”,

“country”: ‘UK’

{

“name”: “Cook Tyson”,

“country”: ‘USA’

}

];

}

Akan menghasilkan seperti ini :

Oke seperti itulahÂ Menggunakan ngStyle Di Angular 4, hingga bertemu di artikel berikutnya.

sumber :kursuswebprogramming.com/blog/

(Visited 4 times, 1 visits today)

Leave a Reply Cancel reply