Angular Pipes – 5

Pada modul ini kita akan bahas built-in pipe async.

Untuk keperluan demo, kita akan buat code simulasi async dengan menggunakan promise dimana resolve akan return string.

Buka file app.component.ts, modifikasi dengan menambahkan code seperti berikut. (lihat bagian commentar).

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //untuk demo pipe async
  appStat = new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('stable');
    }, 2000);
  });

  servers = [
    {
      instanceType: 'medium',
      name: 'Production Server',
      status: 'stable',
      started: new Date(15, 3, 2022)
    },
    {
      instanceType: 'large',
      name: 'Order Database',
      status: 'stable',
      started: new Date(15, 3, 2022)
    },
    {
      instanceType: 'small',
      name: 'Development Server',
      status: 'offline',
      started: new Date(15, 3, 2022)
    },
    {
      instanceType: 'small',
      name: 'Testing Blockchain Server',
      status: 'stable',
      started: new Date(15, 3, 2022)
    }
  ];

  filteredStat = '';
  
  getStatusClasses(server: {instanceType: string, name: string, status: string, started: Date}) {
    return {
      'list-group-item-success': server.status === 'stable',
      'list-group-item-warning': server.status === 'offline',
      'list-group-item-danger': server.status === 'critical'
    };
  }

  onAddServ(){
    this.servers.push(
      {
      instanceType: 'small',
      name: 'New Server',
      status: 'stable',
      started: new Date(15, 3, 2022)
      }
    );
  }
}

Kemudian buka file app.component.html, lalu tambahka element html untuk menampilkan property appStat.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" [(ngModel)]="filteredStat">
      <br><br>
      <button class="btn btn-primary" (click)="onAddServ()">Add Server</button>
      <br><br>
      <!-- async pipe -->
      <h2>App Status tanpa async pipe:{{appStat}}</h2>
      <h2>App Status dengan async pipe:{{appStat | async}}</h2>
      <hr>
      <ul class="list-group">
        <li
          class="list-group-item"
          *ngFor="let server of servers | filter:filteredStat:'status'"
          [ngClass]="getStatusClasses(server)">
          <strong>{{ server.name | shorten:5 }}</strong> | 
          {{ server.instanceType | uppercase }} | 
          {{ server.started | date:'fullDate' | uppercase }}
          <span
            class="badge bg-dark">
            {{ server.status }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>

Sengaja digunakan 2 element h2 untuk menampilkan property appStat untuk melihat perbandingannya.

File project pipes final dapat didownload disini https://drive.google.com/file/d/1i7OjC4Ro-W1MCDLSOQ3l8I2_kG7-f7D-/view?usp=sharing

Sampai disini pembahasan topik pipes sudah selesai. Pada modul berikutnya kita akan mempelajari http request.