Cara Memisahkan Componet - Component Pada Angular Part 5 - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Tuesday, September 24, 2019

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
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

No comments:

Post a Comment