Cara Menampilkan Data Dan Edit Data Secara Real Time Menggunakan Angular Part 4

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kalian cara menampilkan data dan edit data secara real time menggunakan angular part 4.

Nah sebelum kita menampilkan data, yang kita butuhkan adalah sebuah data. Nah kali ini kita akan membuat data palsu. Biasanya data ini berasal dari server maksudnya adalah yang kita buat menggunakan bahasa server seperti laravel, codeigniter, nodejs, python django dan juga menggunakan database seperti mysql, mongodb, postgree sql biasanya di sebut REST API SERVER dan datanya berbentuk atau berformat JSON.
Nah kalau sekarang ini datanya kita buat sendiri seolah - olah ini berasal dari server. Oke mari kita buat.

Kita buat data nya terlebih dahulu.
Kalian buat file di src/app/makanan-indo.ts
makanan-indo.ts

import { Foods } from './foods';

export const LAPERS: Foods[] = [
 { id: 10, name: 'nasi uduk' },
 { id: 11, name: 'nasi goreng' },
 { id: 12, name: 'semur jengkol' },
 { id: 13, name: 'soto betawi' },
 { id: 14, name: 'sop buntung' },
 { id: 15, name: 'sop iga' },
 { id: 16, name: 'bakwan' },
 { id: 17, name: 'gudeg' },
 { id: 18, name: 'mie ayam' },
 { id: 19, name: 'mie goreng' },
 { id: 20, name: 'telor dadar' }
];

Selanjutnya kita import data tersebut dan buat property untuk mengambil data tersebut. Kamu buka src/app/food/food.component.ts
food.component.ts

import { Component, OnInit } from '@angular/core';
import { Foods } from '../foods'; // tambahkan ini import foods.ts
import { LAPERS } from '../makanan-indo'; // tambahkan ini dari makanan-indo.ts
@Component({
  selector: 'app-food',
  templateUrl: './food.component.html',
  styleUrls: ['./food.component.css']
})
export class FoodComponent implements OnInit {

 lapers = LAPERS; // ambil variabel LAPERS dari makanan-indo.ts
  constructor() { }
  ngOnInit() {
  }
}

Lalu kamu buka src/app/food/food.component.html
food.component.html

<h2>Makanan Favoritku</h2>
<ul class="lapers">
  <li *ngFor="let laper of lapers">
    <span class="badge">{{laper.id}}</span> {{laper.name}}
  </li>
</ul>

Maka tampilannya seperti dibawah ini ya

Gambar 1. Menampilkan Data

Nah selanjutnya kita akan membuat edit data binding real time.

Form Edit Data Binding Real Time.

Kita ubah pada bagian src/app/food/food.component/html

<li *ngFor="let laper of lapers">

Menjadi 

<li *ngFor="let laper of lapers" (click)="onSelect(laper)">

Selanjutnya kita tambahkan pada src/app/food/food.component.ts

import { Component, OnInit } from '@angular/core';
import { Foods } from '../foods'; // tambahkan ini import foods.ts
import { LAPERS } from '../makanan-indo'; // tambahkan ini dari makanan-indo.ts
@Component({
  selector: 'app-food',
  templateUrl: './food.component.html',
  styleUrls: ['./food.component.css']
})
export class FoodComponent implements OnInit {
 lapers = LAPERS; // ambil variabel LAPERS dari makanan-indo.ts
 // tambahkan yang dibawah ini ya
 selectedLaper: Foods; // Foods diambil dari foods.ts
 // laper diambil dari *ngFor food.component.html
 onSelect(laper: Foods): void {
  this.selectedLaper = laper;
 }
  constructor() { }
  ngOnInit() {
  }
}

Lalu kita tambahkan pada src/app/food/food.component.html

<h2>Makanan Favoritku</h2>
<ul class="lapers">
  <li *ngFor="let laper of lapers" (click)="onSelect(laper)">
    <span class="badge">{{laper.id}}</span> {{laper.name}}
  </li>
</ul>
// tambahkan yang dibawah ini ya :)
<div *ngIf="selectedLaper">
 <h2>{{ selectedLaper.name | uppercase }} Favoritku</h2>
 <div><span>id: </span>{{ selectedLaper.id }}</div>
 <div>
  <label>name: 
   <input [(ngModel)]="selectedLaper.name" placeholder="name"/>
  </label>
 </div>
</div>

Maka tampilan-Nya akan seperti dibawah ini 

Gambar 2. Menampilkan data dan form edit data

Nah karena ini tampilan-Nya kurang bagus, maka om bewok akan memberikan sedikit guratan css agar terlihat lebih menarik #tsahhh

Menghubungkan Angular 2019 dan Bootstrap 4

Om bewok menggunakan bootstrap 4, jadi sekalian juga belajar cara menghubungkan Angular dan Bootstrap 4 
Kalian tambahkan link bootstrap, kamu buka scr/index.html
index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FoodApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- tambahkan bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html> 

Selanjutnya kamu buka src/app/food/food.component.css

.container {
  text-transform: capitalize;
}

.lapers li {
  cursor: pointer;
}

.lapers li:hover {
  color: #fff;
  background-color: #e74c3c;
}

.lapers li.selected:hover {
  background-color: #3498db;
  color: white;
}

Nah mohon maaf nih pada bagian src/app/food/food.component.html akan ada yang kita ubah, bukan logic nya tapi ya hanya html-Nya.
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>

 <div class="pt-3 pl-4" *ngIf="selectedLaper">
   <h5 class="text-center">{{selectedLaper.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">{{selectedLaper.id}}</p>
     </div>
  </div>
    <div class="form-group row">
      <label>Name</label>
      <div class="col">
        <input class="form-control" [(ngModel)]="selectedLaper.name" placeholder="name" />
      </div>
    </div>
 </div>
</div>

Maka tampilannya seperti dibawah ini ya

Gambar 3. Menampilkan data dan form edit data menggunakan bootstrap 4 dan angular

Selanjutnya kita akan membuat component baru yaitu foods detail pada angular 2019. Oh iya ini adalah tutorial series belajar angular 2019, yang mau lihat daftar tutorialnya bisa lihat dibawah ini dan juga kamu bisa download source code github
Daftar Tutorial angular 2019
Download Source Code Github tanpa bootstrap
Download Source Code Github menggunakan bootstrap