Ana içeriğe geç

Pipes Nedir / Nasıl Kullanılır?

“Angular Pipe” özelliğini, kısa ve basitçe, filtreleme veya dönüştürme olarak tanımlayabiliriz.Bu Pipe’lama işlemi, elinizdeki bir değeri veya veriyi Pipe’lara gönderip, bu değerlerin işlenip, kendi içindeki dönüşümlere göre yeni bir değer üretmesi olarak tanımlanabilir. Angular bizlere sağladığı hazır Pipe’ların yanı sıra, kendimize özel, Özelleştirilmiş Pipe’lar yazmamıza da olanak sağlıyor. Angular’ın bu konu ile alakalı kendi dokümantasyonuna şu adresten ulaşabilirsiniz. https://angular.io/guide/pipes

CorePipesModule

Bu sayfada yer alan tüm pipe'ları kullanabilmek için bu modulum import edilmesi gerekmektedir.

import { CorePipesModule } from '@alpata/octapull.core';

Module import

imports: [CorePipesModule];

AuthRequestPipe

  • İstekler için otomatik olarak token eklenmesini sağlar. Sadece resimler için kullanınız

  • Örnek Kullanım Şekli

<img [src]="item.ProfilResmi | authRequest | async" [alt]="'bu alan için açıklama giriniz'" />

HumanizedTimePipe

  • Tarihleri HumanizedTime tipinde görüntülemek için kullanılır. Örneğin 10 dakika önce, 1 saat önce, 1 hafat önce vb.
  • Sadece Date tipindeki veriler ile çalışır

Kullanımı

{{data.Tarih | humanizedTime}}

SafeHtmlPipe

  • Angular'da dinamik olarak link bind edilmek istendiğinde hata verebilir. Güvenli olduğu belirtmek için kullanılır.
  • Bazı uygulamaların gerçekten yürütülebilir komut dosyası veya stiller içermesi gerekir. Bu gibi durumlarda, Açısal'ın yerleşik sanitasyonunu devre dışı bırakırsınız. Bunu yapmak için bir kanal oluştururuz ve kanalın oluşturucusunun domSanitizer hizmetini enjekte ediyoruz ve değeri güvenli işaretlemek için içeriğe bağlı olarak aşağıdaki yöntemlerden birini çağırıyoruz.

Örneğin button içerisine dinamik olarak html basılmak istendiğinde kullanılmıştır.

Kullanılmak istenen component module dosyasına eklenir

<button type="button" [innerHTML]="item.IconHtml | safeHtml"></button>

string-maxlength-format.pipe.d.ts

  • String ifadelerin kısaltılması için kullanılır

  • @param {string} value Kılsatma uygulanacak olan string ifade

  • @param {number} length Kısaltmadan önce gösterilecek karakter sayısı
  • @param {string} [character='...'] Kısaltmadan sonra eklenecek olan karakter
  • @return {*}
  • @memberof StringMaxLengthFormatPipe

Örnek olarak item.Unvan değişkeni içerisindeki kelime 19 karakter ile kısıtlanmış sonrası için ... eklenmesi yapılmıştır.

<span> {{ item.Unvan | stringMaxLengthFormat: 19:"..." }}</span>