Bu yazıda custom pipe oluşturmayı göstereceğim ama öncesinde pipe nedir bunu kısaca açıklayayım.


Pipe, herhangi bir veriyi component tarafında işlemlerden geçirmeden, ana veriyi koruyarak başka bir şekile çevirmemizi sağlar. Angular'da pipe kullanımını çoğu kişi önemsemese de aslında büyük kolaylık sağlamaktadır.


Örneğin eticaret sitenizde bir ürünün fiyatını yazdırdınız ancak para birimini eklemeniz gerekiyor gelen veride fiyat üzerinde değişiklik yapmanız gerekecek ve ana veriyi değiştirerek basacaksınız, halbuki Angular'da bu işi çözen CurrencyPipe mevcut. Ana veride hiçbir değişiklik yapmadan ona istediğiniz bir para birimini eklemenizi sağlıyor. Veya bir başlık yazdırdınız bunu büyük harflerle yazdırmak istiyorsunuz bunun için UpperCasePipe mevcut gibi gibi.


Şimdi gelelim asıl mevzumuza ve bir örnek belirleyip custom pipe oluşturalım.


Örneğimiz şu;

Siteye yapılan yorumları listelerken isim ve soyisimin ilk harflerini alıp avatar kısmında gösterelim. Yani adı soyadı Mehmet Sert olan yorumun avatarında M.S yazsın.


İlk olarak yorumlarımızın bulunduğu diziyi bir alalım;

  comments = [
    {
      nameSurname: 'Mehmet Sert',
      date: '13.09.2019',
      comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id magna euismod ultrices. Proin vestibulum aliquam felis, vitae faucibus urna tincidunt faucibus. In vulputate pretium leo. Nam non risus arcu.'
    },
    {
      nameSurname: 'Yusuf Borucu',
      date: '14.09.2019',
      comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id magna euismod ultrices. Proin vestibulum aliquam felis, vitae faucibus urna tincidunt faucibus. In vulputate pretium leo. Nam non risus arcu.'
    },
    {
      nameSurname: 'Fatih Kobacık',
      date: '15.09.2019',
      comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id magna euismod ultrices. Proin vestibulum aliquam felis, vitae faucibus urna tincidunt faucibus. In vulputate pretium leo. Nam non risus arcu.'
    },
    {
      nameSurname: 'ali',
      date: '15.09.2019',
      comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae arcu id magna euismod ultrices. Proin vestibulum aliquam felis, vitae faucibus urna tincidunt faucibus. In vulputate pretium leo. Nam non risus arcu.'
    }
  ];


Bu yorumları html de görüntüleyelim;

<div class="comments">
  <div class="comment-item" *ngFor="let comment of comments">
    <div class="avatar"></div>
    <div class="comment">
      <strong>{{ comment.nameSurname }}</strong>
      <span>{{ comment.date }}</span>
      <p>{{ comment.comment }}</p>
    </div>
  </div>
</div>


Css ile biraz görüntüde güzellik sağlayalım;

.comments {
  .comment-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #ececec;
    transition: .3s;
    .avatar {
      min-width: 50px;
      width: 50px;
      height: 50px;
      background-color: #f3f3f3;
      margin: 5px 10px 0 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: bold;
      color: #4e4e4e;
    }
    .comment {
      strong,
      span {
        display: block;
      }
      strong {
        margin-bottom: 3px;
      }
      span {
        font-size: 12px;
      }
      p {
        margin: 5px 0 0 0;
        font-size: 14px;
      }
    }
    &:last-child {
      border-bottom: none;
    }
    &:hover {
      background-color: #f7f7f7;
    }
  }
}


Şuanda görüntümüz şu şekilde;



Şimdi gelelim pipe oluşturmaya;

ng g pipe pipes/avatar

spec dosyasını istemiyorsanız komutun sonuna --spec false ekleyebilirsiniz.


Oluşturduğumuz avatar.pipe'a nameSurname göndereceğiz ve bunun içinde yer alan değeri boşluğa göre split edeceğiz. Daha sonra oluşan dizinin length'i 1 den fazlaysa ilk elemanın ilk karakterini ve ikinci elemanın ilk karakterini alarak ortasına nokta koyacağız (Mehmet SERT -> M.S). Eğer tek elemanlı bir dizi ise sadece o elemanın ilk hanesini alacağız (Mehmet -> M).

Daha sonra bunu return ettireceğiz. Yani şöyle olacak;

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'avatar'
})
export class AvatarPipe implements PipeTransform {


  transform(value: any, args?: any): any {
    const nameSurname = value.split(' ');
    let avatar;
    if (nameSurname.length > 1) {
      avatar = nameSurname[0].slice(0, 1).toUpperCase() + '.' + nameSurname[1].slice(0, 1).toUpperCase();
    } else {
      avatar = nameSurname[0].slice(0, 1).toUpperCase();
    }
    return avatar;
  }


}


Şimdi bu pipe ı kullanalım;

<div class="avatar"></div>

olan kodumuzu şu şekilde değiştiriyoruz;

<div class="avatar">{{ comment.nameSurname | avatar }}</div>


Sonuca bakalım;


Süper.


Yaptığımız örneği buradan inceleyebilirsiniz.


Umarım faydalı olmuştur.