Angular02

Pada modul ini kita akan restruktur component recipe-list. Tujuannya adalah ketika item recipe di-click, recipe detail akan ditampilkan. Pendekatan yang dilakukan adalah sama seperti yang sudah dibahas pada modul navigasi, yaitu menggunakan custom event binding. Buka file recipe-list.component.html, lalu tambahkan event binding (click)=”onSelect(recipeLoop)” Kemudian edit file recipe-list.component.ts, tambahkan method onSelect. Berikutnya adalah menangkap data yang … Read more

Pada modul ini kita akan melakukan restruktur component recipe-list dan recipe-item. Saat ini component recipe-list memuat code recipe-item. Kita akan pindahkan kode tersebut ke component recipe-item. Disini kita akan kembali menggunakan data passing antar komponent. Buka file recipe-item.component.html, isi dengan code yang di-cut dari file recipe-list.component.html Buka file recipe-list.component.html, ubah code menjadi seperti dibawah. Data … Read more

Saat ini aplikasi yang kita buat menampilkan recipe dan shopping list secara bersamaan. Harapannya adalah, ketika menu Recipe pada header di click, halaman recipe saja yang akan ditampilkan, begitu juga dengan Shopping List. Untuk itu, parent component harus bisa mengetahui menu mana yang dipilih. Dalam hal ini adalah app.component yang bertugas menampilkan halaman recipe atau … Read more

Model ingredient akan digunakan oleh component recipe dan shopping, oleh karena itu pada tutorial digunakan pendekatan membuat folder baru app/shared. Dimana folder ini akan berisi file-file yang digunakan oleh berbagai component berbeda. Perhatian: pendekatan diatas tidak mutlak, Anda bebas menggunakan struktur file sendiri. Buat folder app/shared, kemudian buat file baru dengan nama ingredient.model.ts Perhatian, penulisan … Read more