Pipe'larla veri biçimlendirme

Pipe'ları yapılandırarak kullanımınızı daha da ileri taşıyabilirsiniz. Pipe'lar, kendilerine seçenekler aktarılarak yapılandırılabilir.

Bu aktivitede, bazı pipe'lar ve pipe parametreleriyle çalışacaksınız.

Bir pipe'a parametre aktarmak için, parametre değerinin ardından : sözdizimini kullanın. İşte bir örnek:

template: `{{ date | date: 'medium' }}`;

Çıktı Jun 15, 2015, 9:43:11 PM şeklindedir.

Bazı pipe çıktılarını özelleştirme zamanı:

1. DecimalPipe ile bir sayıyı biçimlendirin

   app.ts dosyasında, şablonu decimal pipe'ı için parametre içerecek şekilde güncelleyin.

   template: ` ...
   <li>Number with "decimal" {{ num | number: '3.2-2' }}</li>
   `

   NOTE: Bu format nedir? DecimalPipe için parametre digitsInfo olarak adlandırılır, bu parametre şu formatı kullanır: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

2. DatePipe ile bir tarihi biçimlendirin

   Şimdi, şablonu date pipe'ını kullanacak şekilde güncelleyin.

   template: ` ...
   <li>Date with "date" {{ birthday | date: 'medium' }}</li>
   `

   Ekstra eğlence için, date için farklı parametreler deneyin. Daha fazla bilgi Angular belgelerinde bulunabilir.

3. CurrencyPipe ile para birimini biçimlendirin

   Son göreviniz için, şablonu currency pipe'ını kullanacak şekilde güncelleyin.

   template: ` ...
   <li>Currency with "currency" {{ cost | currency }}</li>
   `

   Ayrıca currency için farklı parametreler de deneyebilirsiniz. Daha fazla bilgi Angular belgelerinde bulunabilir.

Pipe'larla harika iş çıkardınız. Şimdiye kadar büyük ilerleme kaydettiniz.

Uygulamalarınızda kullanabileceğiniz daha fazla yerleşik pipe vardır. Listeyi Angular belgelerinde bulabilirsiniz.

Yerleşik pipe'ların ihtiyaçlarınızı karşılamaması durumunda, özel bir pipe de oluşturabilirsiniz. Daha fazlasını öğrenmek için bir sonraki derse göz atın.