Pipe'lar

Pipe'lar, şablonlarda verileri dönüştürmek için kullanılan fonksiyonlardır. Genel olarak, pipe'lar yan etki oluşturmayan "saf" (pure) fonksiyonlardır. Angular, bileşenlerinizde içe aktarıp kullanabileceğiniz bir dizi faydalı yerleşik pipe'a sahiptir. Ayrıca özel bir pipe da oluşturabilirsiniz.

Bu aktivitede, bir pipe'ı içe aktaracak ve şablonda kullanacaksınız.

Bir şablonda pipe kullanmak için onu bir interpolasyon ifadesine dahil edin. Şu örneğe bakın:

import {UpperCasePipe} from '@angular/common';

@Component({
  ...
  template: `{{ loudMessage | uppercase }}`,
  imports: [UpperCasePipe],
})
export class App {
  loudMessage = 'we think you are doing great!'
}

Şimdi bunu deneme sırası sizde:

1. LowerCase pipe'ını içe aktarın

   Öncelikle, app.ts dosyasını @angular/common paketinden LowerCasePipe için dosya seviyesinde içe aktarma ekleyerek güncelleyin.

   import {LowerCasePipe} from '@angular/common';

2. Pipe'ı şablon importlarına ekleyin

   Ardından, @Component() dekoratörünün imports dizisini LowerCasePipe referansını içerecek şekilde güncelleyin.

   @Component({
     ...
     imports: [LowerCasePipe]
   })

3. Pipe'ı şablona ekleyin

   Son olarak, app.ts dosyasındaki şablonu lowercase pipe'ını içerecek şekilde güncelleyin:

   template: `{{ username | lowercase }}`

Pipe'lar ayrıca çıktılarını yapılandırmak için kullanılabilecek parametreler de kabul edebilir. Bir sonraki aktivitede daha fazlasını öğrenin.

Not: Harika gidiyorsunuz.