Pipe'ları Zincirleme ve Parametreleştirme
Pipe'ları birleştirin ve bağımsız değişkenler aktarın.
Pipe'ları Zincirleme ve Parametreleştirme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Pipe'lara Bağımsız Değişken Geçirme
Pipe'lar iki nokta üst üste işaretinden sonra bağımsız değişken kabul edebilir. Biçim şöyledir: {{ value | pipeName:arg1:arg2 }}. Her bağımsız değişken kendi iki nokta üst üste işaretiyle ayrılır.
Tek Bağımsız Değişken
Birçok pipe tek bir bağımsız değişken alır. Örneğin date pipe'ı bir biçimlendirme dizesi alır.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Birden Çok Bağımsız Değişken
slice pipe'ı, her biri kendi iki nokta üst üste işaretiyle aktarılan bir başlangıç ve bitiş dizini alır.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Dinamik Bağımsız Değişkenler
Bağımsız değişkenler yalnızca sabit değerlerden değil, bileşen özelliklerinden de alınabilir. Bu sayede pipe'ın davranışını tepkisel olarak değiştirebilirsiniz.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;Pipe Zincirleme Nedir
Bir pipe'ın çıktısının bir sonrakinin girdisi olması için pipe'ları zincirleyebilirsiniz. Pipe'lar soldan sağa çalışır.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Zincirleme Örneği
Burada önce bir tarih biçimlendirilir, ardından büyük harfe dönüştürülür. Önce date pipe'ı, sonra uppercase çalışır.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->Sıra Önemlidir
Zincirlenen pipe'ların sırası sonucu değiştirir. Bu örnekte uppercase pipe'ını slice pipe'ından önce veya sonra uygulamak aynı metni üretir; ancak dönüştürme yapan pipe'larda sıra büyük önem taşıyabilir.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Bağımsız Değişkenleri Zincirlemeyle Birleştirme
Bağımsız değişkenleri ve zincirlemeyi dilediğiniz gibi bir arada kullanabilirsiniz. Her pipe, önceki pipe'ın çıktısını kendi değeri olarak almaya devam eder.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Para Birimiyle Zincirleme
Bir sayıyı para birimi olarak biçimlendirin, ardından başındaki ve sonundaki boşlukları temizleyin. Alışılmadık olsa da bu örnek, pipe'ların birleştirilebilir yapı taşları olduğunu gösterir.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Okunabilirlik İpuçları
Uzun pipe zincirleri okunabilirliği azaltabilir. Bir zincir karmaşıklaşırsa değeri bileşende veya bunun yerine özel bir pipe'ta hesaplamayı düşünün.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Pipe'ların Çevresindeki Boşluklar
Okunabilirlik için | ve : çevresindeki boşluklar isteğe bağlıdır ancak önerilir. Angular fazladan boşlukları yok sayar.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Hızlı Kontrol
Pipe bağımsız değişkenleri ve zincirleme konusundaki anlayışınızı sınayın.
Özet
İki nokta üst üste işaretleriyle tek ve birden çok bağımsız değişken geçirmeyi, bileşen özelliklerinden dinamik bağımsız değişkenler kullanmayı ve çıktının soldan sağa akması için pipe'ları zincirlemeyi öğrendiniz.
Sonraki adımda kendi özel pipe'ınızı oluşturacaksınız.
Sıkça Sorulan Sorular
“Pipe'ları Zincirleme ve Parametreleştirme” dersi ücretsiz mi?
Evet — “Pipe'ları Zincirleme ve Parametreleştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Pipe'ları Zincirleme ve Parametreleştirme” dersinde ne öğreneceğim?
Pipe'ları birleştirin ve bağımsız değişkenler aktarın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Pipe'ları Zincirleme ve Parametreleştirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Yerleşik Pipe'ları Kullanma
- Pipe'ları Zincirleme ve Parametreleştirme
- Özel Pipe'lar Oluşturma
- Saf ve Saf Olmayan Pipe'lar