Saturday, December 17, 2016

Implement GET Method in Angular 2

Pada kesempatan kali ini saya ingin berbagi tentang bagaimana mengimplement GET method pada Angular 2. 


Pertama tama kita buat dahulu 1 buah simple component lalu kita beri nama person.ts. Di dalam component ini kita akan membuat sebuah directive yang bernama 'my-person' yang nantinya akan dipanggil dari maincomponent.



Kemudian kita buat 1 buah service dan diberi nama peopleService.ts. Kita akan menghit service itu untuk mendapatkan data. Sample GET Service yang akan dipakai diambil dari 
 https://jsonplaceholder.typicode.com/posts  




Setelah membuat service jangan lupa mengimport  service & component yang sudah kita define. Untuk Component kita register di dalam declarations sedangkan service kita register di dalam providers.


Simple component dan service yang sudah kita buat akan dipanggil dari main component.


Berikut isi dari get.component.html. Dengan menggunakan selector 'my-person' kita harus memprovide data yang dibutuhkan.


[name]="person.title"
maksud dari potongan coding di atas adalah kita mengisi name (yang sudah di define di person.ts) dari person.title

(hello)="saidHello($event)"
maksud dari potongan coding di atas adalah kita mengisi hello menjadi sebuah Event Emmiter yang sudah di define di person.ts yang isinya diambil dari method saidHello yang sudah di define di mainComponent.

ngFor dipakai sebagai looping atau seperti component ng-repeat pada angular 1 yang value nya diambil dari variable people.

Berikut hasil dari html yang sudah tergenerate.


Semoga membantu !


No comments:

Post a Comment