Angular Pipes – 3

by

Membuat custom pipe sangat mudah, tidak lebih dari class javascript dengan decorator dan implementasi method khusus. Berikut syntax dasar untuk membuat custom pipe.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
    name: 'namaPipe'
})
export class namaPipe implements PipeTransform{
    transform(value: any) {
        //code goes here
    }
}

Kita akan membuat pipe secara manual.

Skenarionya adalah pipe yang berfungsi memotong kalimat, contoh “Kalimat ini terlalu panjang” menjadi “kalimat ini ter….”.

Buat file baru, shorten.pipe.ts, (nama disarankan deskriptif, agar mudah dipahami). Lalu masukan code berikut:

Pipe ini akan melakukan pemotongan kalimat yang lebih panjang dari 10 character.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
    name: 'shorten'
})
export class ShortenPipe implements PipeTransform{
    transform(value: any) {
        if (value.length > 10){
            return value.substr(0, 10) + '...';
        }
        return value;
    }
}

Karena kita secara manual membuat pipe, perlu dilakukan registrasi pipe dalam app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { ShortenPipe } from './shorten.pipe'; //import file jika IDE tidak otomatis

@NgModule({
  declarations: [
    AppComponent,
    ShortenPipe //registrasi custom pipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Kita gunakan pipe diatas, buka file app.component.html, lalu tambahkan pipe pada bagian code server.name.

<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)">
          <!-- gunakan custom pipe disini -->
          <strong>{{ server.name | shorten }}</strong> | 
          {{ server.instanceType | uppercase }} | 
          {{ server.started | date:'fullDate' | uppercase }}
          <span
            class="badge bg-dark">
            {{ server.status }}
          </span>

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

Sesuai ekspektasi, nama server berhasil dipotong menggunakan custom pipe diatas.

Menggunakan Parameter

Seperti yang sudah dibahas sebelumnya, pipe dapat menerima parameter. Kita tambahkan parameter untuk pipe diatas, agar kita dapat menentukan panjang teks yang akan dipotong.

Tambahkan parameter pada method transfer, pada tutorial digunakan nama limit. Agar tidak terjadi error ketika pipe digunakan tanpa parameter, perlu didefinisikan default value.

Buka file shorten.pipe.ts, modifikasi seperti code dibawah

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
    name: 'shorten'
})
export class ShortenPipe implements PipeTransform{
    transform(value: any, limit=10) {
        if (value.length > limit){
            return value.substr(0, limit) + '...';
        }
        return value;
    }
}

Anda dapat gunakan pipe shorten diatas seperti berikut

#tanpa parameter
{{ server.name | shorten }}

#dengan parameter
{{ server.name | shorten:5 }}

Sesuai ekspektasi, kita berhasil menambahkan paramater pada shorten pipe.

Sharing is caring:

Leave a Comment