Angular 2 - Mengubah Data

Angular 2 memiliki banyak filter dan pipa yang dapat digunakan untuk mengubah data.

huruf kecil

Ini digunakan untuk mengubah masukan menjadi huruf kecil semua.

Sintaksis

Propertyvalue | lowercase

Parameter

Tidak ada

Hasil

Nilai properti akan diubah menjadi huruf kecil.

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.

huruf besar

Ini digunakan untuk mengubah masukan menjadi huruf besar semua.

Sintaksis

Propertyvalue | uppercase

Parameter

Tidak ada.

Hasil

Nilai properti akan diubah menjadi huruf besar.

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.

mengiris

Ini digunakan untuk mengiris sepotong data dari string input.

Sintaksis

Propertyvalue | slice:start:end

Parameter

start - Ini adalah posisi awal dari tempat irisan harus dimulai.
end - Ini adalah posisi awal dari tempat irisan harus berakhir.

Hasil

Nilai properti akan diiris berdasarkan posisi awal dan akhir.

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.

tanggal

Ini digunakan untuk mengubah string input ke format tanggal.

Sintaksis

Propertyvalue | date:”dateformat”

Parameter

dateformat - Ini adalah format tanggal tempat string input harus dikonversi.

Hasil

Nilai properti akan dikonversi ke format tanggal.

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15); 
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.

mata uang

Ini digunakan untuk mengubah string input ke format mata uang.

Sintaksis

Propertyvalue | currency

Parameter

Tidak ada.

Hasil

Nilai properti akan dikonversi ke format mata uang.

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.

persentase

Ini digunakan untuk mengubah string input ke format persentase.

Sintaksis

Propertyvalue | percent

Parameter

Tidak ada

Hasil

Nilai properti akan dikonversi ke format persentase.

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.

Ada variasi lain dari pipa persen sebagai berikut.

Sintaksis

Propertyvalue | percent: ‘{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}’

Parameter

minIntegerDigits - Ini adalah jumlah minimum digit Integer.
minFractionDigits - Ini adalah jumlah minimum digit pecahan.
maxFractionDigits - Ini adalah jumlah digit pecahan maksimum.

Hasil

Nilai properti akan dikonversi ke format persentase

Contoh

Pertama, pastikan kode berikut ada di file app.component.ts.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

Selanjutnya, pastikan kode berikut ada di file app / app.component.html.

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

Keluaran

Setelah Anda menyimpan semua perubahan kode dan menyegarkan browser, Anda akan mendapatkan output berikut.