Karmaşık olarak tanımlanan bileşenin NKO yöntemiyle implementasyonu

complex-example-nko-document.md

"Karmaşık olarak tanımlanmış bir bileşene eklenmiş olan özelliğin kullanım dökümanı"

countryList

Bir PrimeNG list-box' ına Ülke seçimi için gerekli özelliklerin tanımlanmasını sağlar.

Parametreleri Bu niteliğin bir parametresi yoktur.

Olaylar Bu niteliğin bir olayı yoktur.

Kullanımı

<p-listbox countryList
    ...
    ...
    ...
></p-listbox>

complex-example-nko.directive.spec.ts

// Karmaşık olarak tanımlanan bileşene eklenmiş olan niteliğin test implementasyonu
import { Listbox } from 'primeng/listbox';
import { CountryListDirective } from './country-list.directive';

describe('CountryListDirective', () => {
  let mockListBox: Listbox;

  beforeEach(() => {
    mockListBox = <Listbox>{};
  });

  it('should create an instance', () => {
    const directive = new CountryListDirective(mockListBox);
    expect(directive).toBeTruthy();
  });

  it('Should set default properties of p-listbox',()=>{
    const directive = new CountryListDirective(mockListBox);
    directive.ngOnInit();
    expect(mockListBox.filterPlaceHolder).toBe('Ülke arayın');
    expect(mockListBox.filterLocale).toBe('tr-TR');
    expect(mockListBox.emptyFilterMessage).toBe(
      'Aradığınız ülke bulunamadı'
    );
    expect(mockListBox.emptyMessage).toBe('Kayıtlı ülke yok');
    expect(mockListBox.options).toBeDefined();
    expect(mockListBox.optionLabel).toBe('label');
    expect(mockListBox.optionValue).toBe('value');
    for (let option of mockListBox.options) {
      expect(option.label).toBeDefined();
      expect(option.value).toBeDefined();
    }
  });
});

complex-example-nko.directive.ts

// Bu örnekte https://www.primetek.com.tr/ tarafından geliştirilen,
//  açık kaynak kodlu bir bileşen seti olan PrimeNG kullanılmıştır.
// PrimeNG içerisindeki p-listbox isimli arayüz bileşeni ülke seçim işlemleri için
//  özelleştirilmek için Nitelik Katarak Özelliştirme Yöntemi kullanılmıştır.

import { Directive, OnInit } from '@angular/core';
import { Listbox } from 'primeng/listbox';

@Directive({
  selector: '[countryList]'
})
export class CountryListDirective implements OnInit {


  constructor(private readonly listBox: Listbox) { }

  ngOnInit(){
    this.listBox.filterPlaceHolder = 'Ülke arayın';
    this.listBox.filterLocale = 'tr-TR';
    this.listBox.emptyFilterMessage = 'Aradığınız ülke bulunamadı';
    this.listBox.emptyMessage = 'Kayıtlı ülke yok';
    this.listBox.optionLabel = 'label';
    this.listBox.optionValue = 'value';
    this.listBox.options = [
      { label: 'TÜRKİYE', value: 'TR' },
      { label: 'BİRLEŞİK KRALLIK', value: 'GB' },
      { label: 'BİRLEŞİK DEVLETLER', value: 'US' },
      { label: 'ROMANYA', value: 'RO' },
    ];
  }

}