Membuat User Service dan Data Model

Pada modul ini kita akan membuat user service untuk handling data users yang akan ditampilkan pada aplikasi.

Pada command prompt, jalankan perintah untuk membuat user service.

$ ng g s contactmanager/services/user  --skip-tests

Jangan lupa untuk meregestrasikan service pada module. Buka file contactmanager.module.ts, tambahkan key providers seperti code dibawah.

Perhatian, jika Anda akan menggunakan data dari API, janga lupa untuk import HttpClientModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { MaterialModule } from '../shared/material.module';

import { ContactmanagerAppComponent } from './contactmanager-app.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { MainContentComponent } from './components/main-content/main-content.component';
import { SidenavComponent } from './components/sidenav/sidenav.component';
import { UserService } from './services/user.service';
import { HttpClientModule } from '@angular/common/http';


const routes : Routes = [
  {
    path: '', component: ContactmanagerAppComponent, 
    children: [
      {path: '', component: MainContentComponent}
    ]
},
  {path: '**', redirectTo: ''}
]

@NgModule({
  declarations: [
    ContactmanagerAppComponent,
    ToolbarComponent,
    MainContentComponent,
    SidenavComponent,
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    FormsModule,
    MaterialModule,
    FlexLayoutModule,
    RouterModule.forChild(routes)   
  ],
  providers:[
    UserService
  ]
})
export class ContactmanagerModule { }

Kemudian kita user model untuk user dan note

$ ng g class contactmanager/models/user --skip-tests
$ ng g class contactmanager/models/note --skip-tests

Buka file models/user.ts, buat property dan constructor seperti code dibawah.

import { Note } from "./note";

export class User {
    public id: number;
    public birthDate: Date;
    public name: string;
    public avatar: string;
    public bio: string;
    public notes : Note[];

    constructor(id:number, birthDate:Date, name:string, avatar:string, bio:string, notes:Note[] ){
        this.id = id;
        this.birthDate = birthDate;
        this.name = name;
        this.avatar = avatar;
        this.bio = bio;
        this.notes = notes;
    }

}

Buka file models/note.ts, kemudian masukan code berikut:

Perhatian, code dibawah adalah shortcut yang disediakan oleh TypeScript, dimana property akan otomatis dideklarasikan.

export class Note {
    constructor(public id:number, public title:string, public date:Date){}
}

Kemudian kita buka file user.service.ts, gunakan code dibawah untuk retrieve data dari firebase server.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { User } from '../models/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private _users : BehaviorSubject<User[]>;

  private dataStore : {
    users : User[]
  }

  constructor(private http: HttpClient) { 
    this.dataStore = {users :[]};
    this._users = new BehaviorSubject<User[]>([]);
  }

  get users(): Observable<User[]>{
    return this._users.asObservable();
  }

  loadAllUser(){
    const url = 'https://spangularmaterial-default-rtdb.firebaseio.com/users.json';

    return this.http.get<User[]>(url).subscribe(data =>{
      this.dataStore.users = data;
      this._users.next(Object.assign({}, this.dataStore).users);
    }, error => {
      console.log('error load user');
    });
  }

}

Untuk testing, mari kita gunakan sidenav.component.ts, lalu ubah code menjadi seperti dibawah. Kemudian lihat console.

Sampai disini kita sudah berhasil setup untuk load data menggunakan REST API.

Berikutnya kita akan mulai membenahi aplikasi dengan mengatur data yang ditampilkan kedalam component.