Menggunakan ngFor Pada angular 4 secara Sederhana

Di artikel kali ini saya akan kembali membahas tentaang si merah perkasa yaitu angular, dan kali ini saya akan membahas topik tentangÂ Menggunakan ngFor Di angular 4 secara Sederhana.

Sedikit penjelasan mengenai ngFor yaitu sebuah directive di angular yang berfungsi bagi mengerjakan looping kepada
beberapa data misal data kita yaitu sebuah array, jadi directive ini akan melopping array kita di bagian theme.

saya akan seketika contohkan secara sederhana, saya mempunyai komponen dengan nama
manual-alert.component.ts Â dan memilik sebuah property yang berisikan array sperti berikut:

languageList = [</p>
<p>        {‘name’ :’html’, ‘type’:’frontend’},<br />
        {‘name’ :’java’, ‘type’:’backend’},<br />
        {‘name’ :’css’, ‘type’:’frontend’},<br />
        {‘name’ :’php’, ‘type’:’backend’}<br />
    ];

languageList = [

{‘name’ :‘html’, ‘type’:‘frontend’},

{‘name’ :‘java’, ‘type’:‘backend’},

{‘name’ :‘css’, ‘type’:‘frontend’},

{‘name’ :‘php’, ‘type’:‘backend’}

];

dan saya mempunyai theme dengan nama manual-alert.component.html lalu saya akan menampilkan data array tersebut di sebuah tag element list item menggunakan directive ngFor dengan sintak selaku berikut:

<div class=”container”><br />
     <ul *ngFor=”let language of languageList” ><br />
         <li>{{language.name}} – {{language.type}}</li><br />
     </ul><br />
 </div>

<li>{{language.name}} – {{language.type}}</li>

</ul>

</div>

bila di jalanakan karenanya akan mempunyai hasil seperti ini :

Jadi seperti itulahÂ Menggunakan ngFor Di angular 4 secara Sederhana ,Â semoga dapat di pahami

sumber :kursuswebprogramming.com/blog/

(Visited 1 times, 1 visits today)

Leave a Reply Cancel reply