Angular Http Request – 5

by

Pada modul ini kita akan menampilkan data yang di fetch kedalam template.

Buka file app.component.ts, lalu modifikasi dengan mengisi variable loadedPosts (lihat code yang diberi comment).

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators'; 

import { Post } from './post.model'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  //modifikasi dengan memberikan tipe data
  loadedPosts: Post[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.fetchPosts();
  }

  onCreatePost(postData: Post) {
    this.http
    .post<{ name: string }>('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', postData).subscribe(
      responseData =>{
        console.log(responseData);
      }
    );
  }

  onFetchPosts() {
    this.fetchPosts();
  }

  onClearPosts() {
  }

  private fetchPosts(){
    this.http
      .get<{ [key: string]: Post }>('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json')
      .pipe( map (responseData =>{ 
        const postArr : Post[] = [];
        for (const key in responseData){
          if (responseData.hasOwnProperty(key)){
            postArr.push({...responseData[key], id: key});
          }
        }
        return postArr;
      }))
      .subscribe( posts =>{
        //console.log(posts);
        // populate data response kedalam array untuk ditampilkan dalam html
        this.loadedPosts = posts;
      }
    );
  }
}

Kemudian buka file app.component.html, modifikasi bagian menampilkan data yang di fetch dari server. (lihat bagian commentar).

Kita gunakan ngIf untuk memeriksa apakah terdapat fetch data,

  • jika ada tampilkan menggunakan ngFor
  • Jika tidak ada, tampilkan text tidak ada data.
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <form #postForm="ngForm" (ngSubmit)="onCreatePost(postForm.value)">
        <div class="form-group">
          <label for="title">Title</label>
          <input
            type="text"
            class="form-control"
            id="title"
            required
            ngModel
            name="title"
          />
        </div>
        <div class="form-group">
          <label for="content">Content</label>
          <textarea
            class="form-control"
            id="content"
            required
            ngModel
            name="content"
          ></textarea>
        </div>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="!postForm.valid"
        >
          Send Post
        </button>
      </form>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <button class="btn btn-primary" (click)="onFetchPosts()">
        Fetch Posts
      </button>
      |
      <button
        class="btn btn-danger"
        [disabled]="loadedPosts.length < 1"
        (click)="onClearPosts()"
      >
        Clear Posts
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <!-- menampilkan fetch data -->
      <p *ngIf="loadedPosts.length < 1">No posts available!</p>
      <ul class="list-group" *ngIf="loadedPosts.length >= 1">
        <li class="list-group-item" *ngFor="let post of loadedPosts">
          <h3>{{ post.title }}</h3>
          <p>{{ post.content }}</p>
        </li>
      </ul>
    </div>
  </div>
</div>

Sesuai ekspektasi, data akan ditampilkan.

Menambahkan Loading Status

Langkah ini opsional, namun dapat menambah user experience yang lebih baik.

Skenarionya adalah ketika data fetching dilakukan, akan ditampilkan status data fetching.

Cukup mudah, buka file app.component.ts, lalu tambahkan property isFetching dengan tipe boolean. Kemudian set value true atau false sesuai kondisi. (lihat code bagian commentar).

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators'; 

import { Post } from './post.model'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loadedPosts: Post[] = [];
  isFetching = false;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.fetchPosts();
  }

  onCreatePost(postData: Post) {
    this.http
    .post<{ name: string }>('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', postData).subscribe(
      responseData =>{
        console.log(responseData);
      }
    );
  }

  onFetchPosts() {
    this.fetchPosts();
  }

  onClearPosts() {
  }

  private fetchPosts(){
    //set true saat melakukan fetching data
    this.isFetching = true;
    this.http
      .get<{ [key: string]: Post }>('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json')
      .pipe( map (responseData =>{ 
        const postArr : Post[] = [];
        for (const key in responseData){
          if (responseData.hasOwnProperty(key)){
            postArr.push({...responseData[key], id: key});
          }
        }
        return postArr;
      }))
      .subscribe( posts =>{
        //set fetching false setelah selesai proses fetch data
        this.isFetching = false;
        this.loadedPosts = posts;
      }
    );
  }
}

Selanjutnya kita gunakan property diatas pada app.component.html untuk mengatur status loading.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <form #postForm="ngForm" (ngSubmit)="onCreatePost(postForm.value)">
        <div class="form-group">
          <label for="title">Title</label>
          <input
            type="text"
            class="form-control"
            id="title"
            required
            ngModel
            name="title"
          />
        </div>
        <div class="form-group">
          <label for="content">Content</label>
          <textarea
            class="form-control"
            id="content"
            required
            ngModel
            name="content"
          ></textarea>
        </div>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="!postForm.valid"
        >
          Send Post
        </button>
      </form>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <button class="btn btn-primary" (click)="onFetchPosts()">
        Fetch Posts
      </button>
      |
      <button
        class="btn btn-danger"
        [disabled]="loadedPosts.length < 1"
        (click)="onClearPosts()"
      >
        Clear Posts
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <!-- modifikasi dengan memeriksa status fetching data-->
      <p *ngIf="loadedPosts.length < 1 && !isFetching">No posts available!</p>
      <ul class="list-group" *ngIf="loadedPosts.length >= 1 && !isFetching">
        <li class="list-group-item" *ngFor="let post of loadedPosts">
          <h3>{{ post.title }}</h3>
          <p>{{ post.content }}</p>
        </li>
      </ul>
      <p *ngIf="isFetching">Loading data from server...</p>
    </div>
  </div>
</div>

Sesuai ekspektasi, ketika web pertama kali diload atau ketika button fetch data ditekan, akan tampil status data sedand diambil dari server.

Sharing is caring:

Leave a Comment