Angular Notifications Kullanımı

Merhaba arkadaşlar.

Bugünkü yazımızda Angular'da notification'lardan bahsedeceğiz. Aşağıdaki gibi bir görüntü ortaya çıkacak.

Şimdi ilk olarak projemizi VS Code ortamında açalım. Sonra package.json içerisinde " dependencies " kısmının içine tırnak içinde " angular2-notifications " yazalım. İki nokta koyduktan sonra bize kararlı sürümleri gösterir. Bunlardan herhangi birini seçebilirsiniz. Bu projede 0.9.8 sürümü seçilmiştir.

Daha sonra projemizi kaydedip View --> Integrated Terminal ekranında " npm install " komutunu yazalım ve notification için gerekli dosyalarımız yüklenmeye başlasın.

Şimdi indirdiğimiz dosyaları projemizde kullanabilmek için import edelim.

app klasörünün altında app.module.ts isimli dosyamızı açalım ve SimpleNotificationsModule, NotificationsService sınıflarını import edelim.

import {SimpleNotificationsModule,NotificationsService} from 'angular2-notifications'

Sayfada aşağılara doğru inelim ve NgModule içindeki imports kısmına sınıfımızı tanıtalım.
SimpleNotificationsModule.forRoot() yazalım.
Son olarak da providers içine NotificationsService sınıfını tanıtalım.

Sıra notifications ayarlarını yapmaya geldi. Notifications'lara her sayfadan erişebilmek için bunu app.component.ts içerisinde tanıtmalıyız.

public show={
position:["bottom","right"],  // Altta sağda gözüksün
timeOut:3000,                         // 3 saniye gözüksün
lastOnBottom:true                  // Sonrakiler aşağıdaki gözüksün
}

Bunu sayfamızda görmek için app.component.html içerisinde aşağıdaki tagı yazmamız gerekiyor.
<simple-notifications [options]="show"></simple-notifications>

Şimdi sıra geldi artık notificationı göstermeye. Şimdi örneğimize göre student.component.ts açılır.
Ctor parantezleri içine notifications tanıtılır.

private notificationsService: NotificationsService

Tıklama event'ine ise yapılacak işlemlerden sonra notifications bloğu yazılır.

this.notificationsService.info("Info",student.studentName + " " + student.studentLastName);

NOT : Eğer yukarıdaki şekilde timeout çalışmaz ise aşağıdaki gibi mesajı gösterirken de ayarlanabilir.

this.notificationsService.info("Info",student.studentName + " " + student.studentLastName, {         timeOut: 3000,
 showProgressBar: true,
 clickToClose: true,
});