Cara Membuat Component Dan Membuat Property Pada Angular 2019 Part 2

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini kita akan melanjutkan tutorial angular mengenai Cara Membuat Component Dan Membuat Property Pada Angular 2019 Part 2. Oh iya ini adalah tutorial series belajar angular, yang mau lihat daftarnya bisa lihat dibawah ini ya
DAFTAR TUTORIAL ANGULAR

Oh iya om bewok belum jelasin component tuh apa ?

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

Intinya component untuk menampilkan data tapi perbagian gitu. belum ngerti ya ? nanti kita contohin aja deh, makanya jangan lupa subscribe 😁, ikutin terus sampai tutorial selanjutnya, karena kita akan membuat beberapa component : tampilan data, form, search pokoknya nanti om bewok kasih tau kalau itu memang component oke oke. yuk kita buat component-Nya

Buka terminal kalian lalu ketikan
ng generate component food
Pastikan posisi foldernya ada di cd foodApp ya. kalau udah ngikutin part 1 pasti tau hehe. Lihat gambar dibawah ini ya

Gambar 1. Install Component

Gambar 2. Berhasil install component pada angular

Oke saatnya kita tampilkan data dengan menambahkan property dengan cara buka
src/app/food/food.component.ts lalu tambahkan

makanan = "nasi goreng";

Kodinganya seperti dibawah ini ya
food.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-food',
  templateUrl: './food.component.html',
  styleUrls: ['./food.component.css']
})
export class FoodComponent implements OnInit {

 makanan = "nasi goreng";

  constructor() { }

  ngOnInit() {
  }

}

Lalu kalian buka src/app/food/food.component.html dan tambahkan kodingan seperti dibawah ini ya

{{makanan}}

etsss belum selesai, kalian buka  src/app/app.component.html dan tambahkan kodingan seperti dibawah ini ya 

<h1>Selamat datang</h1>
<app-food></app-food>

Lalu kamu jalankan dengan cara ng serve di terminal, lalu buka browser kalian dan tuliskan localhost:4200 pada address bar. Jika berhasil akan muncul seperti dibawah ini ya

Gambar 3. Berhasil menampilkan data pada app.component.html

Jadi intinya kita membuat property makanan yang isinya nasi goreng, lalu kita tampilkan di food.component.html,
kebetulan nama property kita adalah makanan jadi kita 
buka kurawal 2x {{tulis nama property}} berarti jika kita tambahkan property kita tambahkan dengan nama {{makanan}}. 

Belum selesai karena kita harus tampilkan di app.component.html karena ini adalah yang utama atau parent nya lah intinya. 
Kita buka app.component.html lalu kita tambahkan 
<app-food></app-food> 

Darimana <app-food></app-food> ? 

Kita bisa lihat di food.component.ts lalu cari selector: 'app-food',

Gambar 4. app-food berasal dari selector food.component.ts

Nah dari sini app-food, kalau kamu ubah menjadi app-ngemil berarti pada bagian app.component.html kamu ganti menjadi 
<app-ngemil></app-ngemil> bisa kamu praktekin masing-masing ya.

Karena ini adalah tutorial series belajar angular, kamu bisa lihat daftarnya dibawah ini dan juga source kodenya 
Daftar Tutorial Angular 
Download Source code github