Angular 4 – Angular Notifications Entegrasyonu ve Kullanımı

Merhaba,

Her web site uygulamasında olduğu gibi Angular uygulamalarında da belirli işlemler neticesinde son kullanıcıya iletilmesi gereken bildiriler mevcuttur ve bu bildirileri kullanıcının etkileşimine eşlik edecek görsellikte sunacağımız yapılara ihtiyacımız vardır.

Bu yapılarda standart html elemanları tercih edilebilirken daha gelişmiş componentlerede başvurulabilir. İşte bu componentlerden Angular için tasarlanmış olan ‘Angular Notifications‘ componenti üzerine konuşuyor olacağız ve bir Angular projesine entegrasyonunun nasıl sağlandığı ve kullanıldığı üzerine detaylı irdelemede bulunacağız.

Projeye Angular Notifications Entegrasyonu

İlk olarak Angular uygulamasına ‘Angular Notifications’ entegrasyonunu gerçekleştirebilme üzerinde duralım. Bu işlem için öncelikle “package.json” dosyasındaki “dependencies” özelliğine “angular2-notifications” referansını eklememiz gerekmektedir.

.
.
.
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "angular2-notifications": "1.0.1"
  },
.
.
.

Ardından “Integrated Terminal” penceresinden “npm install” komutunu çalıştırarak “package.json” dosyasında olup uygulamada olmayan paketleri projeye yükleyelim.

Artık “angular2-notifications” paketi uygulamamıza yüklendiğine göre programatik çalışmaya başlayabiliriz.

Angular Notifications Kullanımı

İlk olarak; varsayılan modül dosyası olan “app.module.ts” dosyasına giderek aşağıdaki çalışmayı gerçekleştiriyoruz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NotificationsService, SimpleNotificationsModule } from "angular2-notifications";
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SimpleNotificationsModule.forRoot()
  ],
  providers: [NotificationsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Burada dikkat ederseniz eğer biraz önce yüklemiş olduğumuz “angular2-notifications” isimli paket içerisindeki “NotificationsService” ve “SimpleNotificationsModule” isimli sınıfları import ediyoruz. Bu sınıflardan “SimpleNotificationsModule” isimli olanı uygulamaya dışarıdan lazım olan yapıları import edeceğinden dolayı “imports” özelliğine “SimpleNotificationsModule.forRoot()” şeklinde çağırarak tanımlıyoruz. En nihayetinde “.forRoot” metodu bu nesne içerisinde import edilmesi gereken ilgili yapıları elde etmemizi sağlamaktadır.

“NotificationsService” sınıfı ise notifikasyon işleminde kullanacağımız servis nesnesini kullanılacağı yere constructerdan sunacağı için “providers” özelliğine tanımlayarak global erişilebilir hale getiriyoruz.

Sıra üzerinde çalışacağımız html sayfasına notifikasyona ait “selector” deyimini vermeye geldi. Örnekte “app.component.html” dosyası üzerinde çalışıldığı için ilgili işlemi bu dosya üzerinde örneklendiriyoruz.

<input type="text" #txtAdSoyad />
<button (click)="AdSoyadGoster(txtAdSoyad.value)">Göster</button>
<br>
<simple-notifications [options]="notificationOptions"></simple-notifications>

Burada dikkat ederseniz eğer “simple-notifications” niteliği notifikasyon özelliğini temsil etmektedir. Oluşturulacak notifikasyonun ayarlarını ise [options] attributeu ile tanımlanan “notificationOptions” isimli ilgili html dosyasının component classından beslenen değişkenle gerçekleştirmekteyiz.

import { Component } from '@angular/core';
import { NotificationsService } from 'angular2-notifications';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private notificationsService: NotificationsService) { }
  public notificationOptions = {
    timeOut: 3000, //3 saniye gözükecek.
    position: ["top", "right"], //Yukarıda, sağda gösterilecek.
    lastOnBottom: true
  }
  AdSoyadGoster(text: string) {
    this.notificationsService.success("Ad Soyad", text);
  }
}

Ayriyetten butonun click eventına bağlanan “AdSoyadGoster” fonksiyonu tetiklendiği zaman constructerdan gelen “NotificationsService” nesnesi üzerinden “.success” fonksiyonu ile notifikasyon devreye sokulmaktadır.

“success” fonksiyonuyla beraber diğer yapısal notifikasyon fonksiyonlarınıda aşağıda ele alırsak eğer;

şeklinde tarif edebiliriz.

Tüm bu işlemleri gerçekleştirdikten sonra uygulamayı kaydedip yayınladığınızda aşağıdaki gibi bildiri yapılanmasıyla karşılaşabilirsiniz.

Evet. Bu içeriğimizde de oldukça kullanışlı ve gayet şık olan Angular Notifications üzerine detaylı bir entegrasyon makalesi oluşturmuş olduk.

Faydalanmanız ve yararını Angular uygulamalarında bol bol görmeniz dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…