Cara Memisahkan Componet - Component Pada Angular Part 5

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan berbagi kepada kalian "Bagaimana Cara Memisahkan Component-Component Pada Angular", maksudnya gini pada part sebelumnya kita sudah membuat data, menampilkan data dan membuat form edit data secara real time(data binding) dengan menggunakan 1 component saja. Nah kita akan memisahkan antara menampilkan data dan form edit data, jadi kita buat terpisah.

Mengapa dipisah  ? karena emang udah ga cocok 😅

Lebih mudah terorganisir, mudah dipahami dan juga bisa digunakan kembali. Maksudnya jika ada component yang ingin menggunakan component tersebut, kita tinggal memanggil data tersebut dan tidak perlu membuatnya kembali, karena akan menghabiskan waktu.

Oh ya ini adalah tutorial series belajar angular 2019, kalau ada yang belum lihat sebelumnya, kalian bisa lihat tutorial seriesnya dibawah ini

Daftar tutorial angular 2019

Karena kalau kamu belum melihat tutorial sebelumnya, nanti kamu ga akan mengerti, jadi lebih baik kamu belajar dari tutorial awal.

Oke yang pertama kita lakukan adalah membuat component, dengan cara buka terminal atau cmd kalian lalu ketikan ini di lokasi angular tersebut.

ng generate component food-detail

Selanjutnya kamu buka src/app/food-detail/food-detail.component.html

food-detail.component.html

<div *ngIf="laper">
 <h2>{{ laper.name | uppercase }} Details</h2>
 <div><span>id: </span>{{ laper.id }}</div>
 <div>
  <label>Name:<input [(ngModel)]="laper.name" placeholder="name"/></label>
 </div>
</div>

Lalu kamu buka 
src/app/food-detail/food-detail.component.ts lalu tambahkan 

food-detail.component.ts

// tambahkan INPUT
import { Component, OnInit, Input } from '@angular/core';
// Tambahkan Foods dari foods
import { Foods } from '../foods';

@Component({
  selector: 'app-food-detail',
  templateUrl: './food-detail.component.html',
  styleUrls: ['./food-detail.component.css']
})
export class FoodDetailComponent implements OnInit {
   // Tambahkan ini
 @Input() laper: Foods;

  constructor() { }

  ngOnInit() {
  }

}

Tambahkan INPUT pada import pertama lalu import Foods yang berasal dari file foods, dan juga tambahkan @input() laper: Foods; laper yang berasal dari *ngFor="let laper of laperts" ada di food.component.html

Nah karena kita sudah memindahkan bagian input di 

food-detail.component.html,

nah saatnya kita panggil tuh di food.component.html. Jadi ibaratnya food.component.html itu adalah parent(orang tua) dan food-detail.component.html itu adalah child(anak-anak) jadi mereka tetap bergantung dengan orang tuanya dong, jadi kita panggil deh ke food.component.html. Jadi sekarang kita buka 

src/app/food.component.html

food.component.html

<h2>Makanan Favoritku</h2>
<ul class="lapers">
  <li *ngFor="let laper of lapers" [class.selected]="laper === selectedLaper" (click)="onSelect(laper)">
    <span class="badge">{{laper.id}}</span> {{laper.name}}
  </li>
</ul>

<app-food-detail [laper]="selectedLaper"></app-food-detail>

Lalu kita jalankan aplikasi tersebut dengan cara buka terminal kalian lalu ketikan ng serve. Maka tampilanya akan seperti dibawah ini

Gambar 1. Hasil memisahkan component dan tanpa menggunakan bootstrap

Sebenarnya ga ada bedanya sama part sebelumnya, karena kita hanya memindahkan component agar lebih mudah dibaca, reusable (bisa digunakan kembali) dan masih banyak lagi manfaatnya.

Menghubungkan Bootstrap dan Angular 

Oh iya karena sebelumnya kita buat menggunakan bantuan bootstrap, nah kamu juga bisa menghubungkan dengan bootstrap, bagian yang hanya diubah adalah food.component.html dan food-detail.component.html

src/app/food/food.component.html

<div class="container">
 <h2 class="p-3 text-center">Makanan Favorit</h2>
 <ul class="list-group lapers">
    <li class="list-group-item" *ngFor="let laper of lapers" [class.selected]="laper === selectedLaper" (click)="onSelect(laper)">
   <span class="badge">{{laper.id}}</span>
   {{laper.name}}
  </li>
 </ul>
 <app-food-detail [laper]="selectedLaper"></app-food-detail>
</div>

src/app/food-detail/food-detail.component.html

<div class="pt-3 pl-4" *ngIf="laper">
  <h5 class="text-center">{{laper.name | uppercase}} Adalah Favoritku</h5>
 <div class="form-group row">
    <span>ID</span>
    <div class="col-6 col-sm-9">
     <p class="font-weight-bold">{{laper.id}}</p>
    </div>
 </div>
   <div class="form-group row">
     <label>Name</label>
     <div class="col">
       <input class="form-control" [(ngModel)]="laper.name" placeholder="name" />
     </div>
   </div>
</div>

Maka tampilanya seperti dibawah ini ya 

Gambar 2. Tampilan dengan menggunakan bootstrap 4

Kalau masih bingung, kamu bisa lihat source codenya dibawah ini ya

Selanjutnya kita akan belajar mengenai service bukan service komputer ya yang di maksud, pokoknya ikutin terus. Sampai jumpa di tutorial selanjutnya ya. 

Oh iya yang mau lihat daftar tutorial angular dan download source code nya bisa lihat dibawah ini ya

Daftar Tutorial Belajar Angular

Download Source code github Tanpa menggunakan Bootstrap
Download Source code github dengan menggunakan Bootstrap