0Pricing
Angular Academy · Ders

Yerleşik Pipe'ları Kullanma

Tarihleri, sayıları ve metinleri pipe'larla biçimlendirin.

Yerleşik Pipe'ları Kullanma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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 nedir?

Pipe, verileri şablonunuzda doğrudan görüntüleme amacıyla dönüştürür. Bir değer, pipe karakteri olan | ve ardından pipe adını yazarsınız.

Pipe'lar, fazladan bileşen mantığı yazmadan tarihleri, sayıları, para birimlerini ve metinleri biçimlendirmek için çok kullanışlıdır.

Pipe söz dizimi

Temel biçim {{ value | pipeName }} şeklindedir. Angular, değeri pipe'a iletir ve dönüştürülmüş sonucu oluşturur.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

uppercase ve lowercase pipe'ları

uppercase ve lowercase, bir dizenin harf biçimini değiştirir. Etiketler ve başlıklar için basit ve yaygın olarak kullanılırlar.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

date pipe'ı

date pipe'ı, bir Date nesnesini veya zaman damgasını okunabilir bir dizeye dönüştürür. Varsayılan olarak orta uzunlukta bir tarih biçimi kullanır.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Tarihleri biçimlendirme

date pipe'ına "shortDate", "fullDate" veya "yyyy-MM-dd" gibi özel bir desen örneğinde olduğu gibi bir biçim dizesi iletebilirsiniz.

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

currency pipe'ı

currency pipe'ı bir sayıyı para olarak biçimlendirir. Varsayılan olarak USD kullanır; ancak bir para birimi kodu iletebilirsiniz.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

number ve percent pipe'ları

number pipe'ı sayıları basamak seçenekleriyle biçimlendirir, percent ise bir değeri yüzde olarak gösterir.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

digitsInfo'yu anlama

number pipe'ı bir digitsInfo dizesi kabul eder: minIntegerDigits.minFractionDigits-maxFractionDigits. Örneğin "1.2-2" tam olarak iki ondalık basamak gösterir.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

json pipe'ı

json pipe'ı herhangi bir nesneyi JSON dizesine dönüştürür. Temel olarak şablonlarda hata ayıklamak ve verilerinizin yapısını görmek için kullanılır.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

slice pipe'ı

slice pipe'ı, JavaScript slice işlemine benzer şekilde bir dizinin veya dizenin bir alt kümesini döndürür. Listeleri kısaltmak için kullanışlıdır.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Bağımsız bileşenlerde pipe'ları içe aktarma

Bağımsız bileşenlerde kullandığınız pipe'ları içe aktarmanız gerekir; örneğin @angular/common içinden DatePipe veya CurrencyPipe içe aktarabilirsiniz.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Kısa kontrol

Yerleşik pipe'ları ne kadar anladığınızı test edin.

Özet

Temel yerleşik pipe'ları öğrendiniz: uppercase, lowercase, date, currency, number, percent, json ve slice.

Pipe'lar biçimlendirme işini temiz ve bildirimsel bir şekilde şablonda tutar. Sırada pipe'ları zincirlemek ve onlara bağımsız değişkenler iletmek var.

Sıkça Sorulan Sorular

“Yerleşik Pipe'ları Kullanma” dersi ücretsiz mi?

Evet — “Yerleşik Pipe'ları Kullanma” 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.

“Yerleşik Pipe'ları Kullanma” dersinde ne öğreneceğim?

Tarihleri, sayıları ve metinleri pipe'larla biçimlendirin. 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 1. dersidir.

“Yerleşik Pipe'ları Kullanma” 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

  1. Yerleşik Pipe'ları Kullanma
  2. Pipe'ları Zincirleme ve Parametreleştirme
  3. Özel Pipe'lar Oluşturma
  4. Saf ve Saf Olmayan Pipe'lar
← Angular Academy Sayfasına Dön