Angular Pipes – 1

by

Pengenalan

Pipes adalah fitur built-in dari Angular yang berguna untuk transform ouput pada html template, tanpa mengubah data origin. Pipes juga support data synchronous dan asynchronous data.

Contoh sederhana dari pipes adalah, misalnya Anda memiliki data username = root, dan ingin ditampilkan dengan huruf besar. 

<p>{{username | uppercase }}</p>

# akan ditampilkan
# ROOT

Contoh pipe uppercase diatas adalah builtin dari Angular. Selain built-in pipe, kita pun dapat membuat custom pipe.

Setup Awal Project

Untuk memudahkan tutorial, Anda dapat download start project disini: https://drive.google.com/file/d/1EczEU2mnxeFnNhOreXtzdVp3KzES4Q4O/view?usp=sharing

Atau Anda dapat copy code berikut

file app.component.css

.container {
  margin-top: 50px;
}

file app.component.html

<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">
      <ul class="list-group">
        <li
          class="list-group-item"
          *ngFor="let server of servers"
          [ngClass]="getStatusClasses(server)">
          <strong>{{ server.name }}</strong> | {{ server.instanceType }} | {{ server.started }}
          <span
            class="badge bg-dark">
            {{ server.status }}
          </span>

        </li>
      </ul>
    </div>
  </div>
</div>

file app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  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)
    }
  ];
  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'
    };
  }
}

Berikut tampilan awal project.

Sharing is caring:

Leave a Comment