Basit olarak tanımlanan bileşenin implentasyonu

basic-nko-directive.document.md

"Basit olarak tanımlanan bileşene eklenmiş olan özelliğin dökümanı"

saveButton

Bir PrimeNG butonuna kayıt işlemleri 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-button saveButton
    ...
    ...
    ...
></p-button>

basic-nko.directive.spec.ts

// Basit olarak tanımlanan bileşene eklenen niteliğin test implementasyonu
import { Button } from 'primeng/button';
import { SaveButtonDirective } from './save-button.directive';

describe('SaveButtonDirective', () => {

  let mockButton: Button;

  beforeEach(()=>{
    mockButton = <Button>{};
  });

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

  it('Should set default properties of p-button',()=>{
    const directive = new SaveButtonDirective(mockButton);
    directive.ngOnInit();
    expect(mockButton.type).toEqual('submit');
    expect(mockButton.icon).toEqual('pi pi-save');
    expect(mockButton.iconPos).toEqual('left');
    expect(mockButton.loadingIcon).toEqual('pi pi-spinner pi-spin');
   });
 

});

basic-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-button isimli arayüz bileşeni kaydetme işlemleri için 
//  özelleştirilmek amacı ile Nitelik Katatarak Özelleştirme Yöntemi kullanılmıştır

import { Directive, OnInit } from '@angular/core';
import { Button } from 'primeng/button';

@Directive({
  selector: '[saveButton]'
})
export class SaveButtonDirective implements OnInit {

  constructor(private readonly button:Button) { }

  ngOnInit(){
    this.button.type = 'submit';
    this.button.label = 'Kaydet';
    this.button.iconPos = 'left';
    this.button.loadingIcon = 'pi pi-spinner pi-spin';
    this.button.icon = 'pi pi-save';
  }

}