Belajar Routing Angular Part 7

bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share Cara Menggunakan Routing Pada Angular. Oh iya tutorial ini adalah bagian dari tutorial series belajar angular. Kalau kamu ingin melihat tutorial seriesnya bisa lihat dibawah ini ya

Daftar Tutorial Series Angular

Routing ini intinya kita bisa berpindah-pindah semacam menubar atau navigation bar atau navbar. Jadi kita bisa pindah-pindah antar component.

Sebelumnya kita sudah membuat beberapa component yaitu:
1. food
2. food detail (edit data)
3. message

Nah kita tambahakan component terbaru dengan nama dashboard, namun sebelumnya kita perlu menambahkan file routing, jadi file ini berfungsi untuk bagian pindah-pindahnya, kalau di codeigniter biasanya di bagian config/routers.php

Buka terminal kalian lalu ketikan
ng generate module app-routing --flat --module=app
Lalu tambahkan pada bagian src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FoodComponent } from './food/food.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FoodDetailComponent } from './food-detail/food-detail.component';
const routes: Routes = [
 // nama path bebas localhost:4200/food
 { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
 { path: 'dashboard', component: DashboardComponent },
 { path: 'detail/:id', component: FoodDetailComponent },
 { path: 'food', component: FoodComponent },
 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Lalu kamu tambahkan juga pada src/app/app.component.html

<nav>
 <a routerLink="/dashboard">Dashboard</a><br>
 <a routerLink="/food">Food</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

Sekarang kita akan membuat component dashboard dengan cara
ng generate component dashboard
Lalu kita tambahkan kodinganya pada dashboard.component.html dan dashboard.component.ts
src/app/dashboard/dashboard.component.html

<h3>Top Foods</h3>
<div class="grid grid-pad">
  <a *ngFor="let laper of lapers" class="col-1-4"
    routerLink="/detail/{{laper.id}}">
  <div class="module laper">
    <h4>{{laper.name}}</h4>
  </div>
</a>
</div>

src/app/dashboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Foods } from '../foods'; // tambahkan ini import foods.ts
import { FoodService } from '../food.service';

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

 lapers: Foods[] = [];

  constructor(private foodService: FoodService) { }

  ngOnInit() {
   this.getFoods();
  }
  // yang ditampilkan hanya 5 food
  getFoods(): void {
   this.foodService.getFoods()
    .subscribe(lapers => this.lapers = lapers.slice(1, 5));
  }
}

Lalu sekarang saatnya tambahkan pada food.component.html dan food.component.ts
food.component.html

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

food.component.ts

import { Component, OnInit } from '@angular/core';
import { Foods } from '../foods'; // tambahkan ini import foods.ts
import { FoodService } from '../food.service';

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

 lapers: Foods[];

  constructor(private foodService: FoodService) { }

  ngOnInit() {
   this.getFoods();
  }

  getFoods(): void {
   this.foodService.getFoods().subscribe(lapers => this.lapers = lapers);
  }
}

Selanjutnya kita akan menambahkan pada food-detail.component.html dan food-detail.component.ts
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>
  <button (click)="goBack()">go back</button>
</div>

 food-detail.component.ts

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

import { FoodService }  from '../food.service';

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

 laper: Foods;

   constructor(
    private route: ActivatedRoute,
    private foodService: FoodService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getFood();
  }

  getFood(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.foodService.getFood(id).subscribe(laper => this.laper = laper);
  }

  goBack(): void {
    this.location.back();
  }
}

Terakhir kita akan menambahkan pada src/app/food.service.ts 
food.service.ts

import { Injectable } from '@angular/core';
// import foods & makanan-indo
import { Foods } from './foods';
import { LAPERS } from './makanan-indo';

import { MessageService } from './message.service'; 

// import rxjs observable
import { Observable, of } from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class FoodService {

  constructor(private messageService: MessageService) { }

  getFoods(): Observable<Foods[]> {
   // Akan mengirim pesan jika mengambil data makanan
   this.messageService.add('FoodService: fetched foods');
   return of(LAPERS);
  }

  getFood(id: number): Observable<Foods> {
   this.messageService.add(`Hero service: fetched food id=${id}`);
   return of(LAPERS.find(laper => laper.id === id));
  }
}

Tutorial selanjutnya kita akan menambahkan search, delete dan belajar mengenai HTTP. Kalau kamu mau lihat Daftar tutorial series angular dan source code nya bisa lihat dibawah ini ya
Daftar Tutorial Series Belajar Angular
Download Source Code Angular Github