Belajar Mengenai Services (Logic) Dan RxJS Angular Part 6

bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok, kali ini kita akan melanjutkan tutorial series mengenai Services Angular Part 6. Jadi sebenarnya services ini mirip sama konsep mvc (model view controller). Kemarin kita udah belajar Component, tapi didalamnya kita gabungin semuanya tampil data dan logic nya semuanya di taruh di component. 

Fungsi services ini adalah untuk memisahkan logic dan menampilkan datanya. Jadi service untuk logic nya dan component untuk menampilkan data yang akan di tampilkan ke browser.

Oh iya ini adalah tutorial series belajar angular, yang mau lihat tutorial seriesnya bisa lihat dibawah ini ya
Daftar Tutorial Series Belajar Angular

Kita buat terlebih dahulu services dengan cara, buka terminal kalian
ng generate service food

Setelah selesai kita bisa lihat di src/app/food.service.ts
lalu sekarang kita pindahkan logic nya pada food.service.ts, oke mari kita mulai
src/app/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);
  }
}

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

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
import { FoodService } from '../food.service';


@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

 // let laper of lapers
 lapers: Foods[];

 // laper diambil dari *ngFor food.component.html
 onSelect(laper: Foods): void {
  this.selectedLaper = laper;
 }
  constructor(private foodService: FoodService) { }

  ngOnInit() {
   this.getFoods();
  }

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

}

Selanjutnya kita membuat component baru bernama message, fungsinya adalah dia ini seperti log, jadi ketika misalnya kita input data makan dimemunculkan message bahwa kita menambah kata, atau misalnya data muncul maka message nya akan muncul bahwa data diambil. Jadi ini kayak log message, kalau kita mau melakukan sesuatu, dia bakal ngasih tau ke kita.

Kita buat component dan service nya ya, karena untuk tampilan nya kita taruh di component dan logic nya kita taruh di service message. Buka terminal kalian lalu ketikan 
ng generate component messages
dan 
ng generate service message
Kita tambahkan message ini src/app/app.component.html

<app-food></app-food>
<app-messages></app-messages> 

Kita tambahkan kodingan pada src/app/message.service.ts

import { Injectable } from '@angular/core';

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

  messages: string[] = [];

 add(message: string) {
  this.messages.push(message);
 }

 clear() {
  this.messages = [];
 }

  constructor() { }
}

Lalu kita tambahakn src/app/messages/message.component.ts dan  
src/app/messagesmessage.component.html
message.component.html

<div *ngIf="messageService.messages.length">
  <h2>Messages</h2>
  <button class="clear"
          (click)="messageService.clear()">clear</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>

message.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';

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

  constructor(public messageService: MessageService) { }

  ngOnInit() {
  }

}

Terimakasih sudah membaca tutorial ini, sampai jumpa di tutorial selanjutnya ya. Kalau kamu mau lihat tutorial series angular dan source codenya bisa lihat dibawah ini ya.
Tutorial Series Angular 2019
Download Source Code Angular Github