Angular Projesinde Notifier Kullanımı

Herkese selamlar uzun süredir üzerinde çalıştığım projelerden dolayı bir süredir buralara bakamıyordum bugün basit bir konu ile tekrardan karşınızdayım. Angular son zamanlarda oldukça kullandığım ve detaylarını öğrenmeye çalıştığım bir teknoloji. Bugün sizlere “angular-notifier” isimli paketi kullanmayı ve projemize nasıl kuracağımızı göstermeye çalışacağım.

Paket ile alakalı detaylı bilgi ve kodlar için ziyaret edebilirsiniz; https://www.npmjs.com/package/angular-notifier

Öncelikle “npm install angular-notifier” ile paketimizi projemize indirelim. Bu kısmı detaylı anlatmayacağım. Visual Studio Code kullanıyorsanız “Terminal” ekranını açarak gerekli paketi projemize dahil edebiliriz. Bu kısma kadar işimiz oldukça kolay.

Daha sonrasında ise Angular projemizde “angular.json” isimli json dosyamıza gidelim. Build altında “styles” kısmına “node_modules/angular-notifier/styles.css” bu kodu eklememiz gerekli bu kısım projenizin dosya dizinine göre değişiklik gösterebilir. Node Modules altında angular-notifier’ı bulmamız yeterli olacaktır.

Bu kısımdan sonra ise “app-module.ts” dosyamıza gelelim. Notifty bildirimlerimiz için bu kısımda konfigürasyon ayarlarımızı yapacağımız kısmı ekleyelim.

Bu kısımda ise son olarak importlarımızı yapmamız gerekli “NotifierModule.withConfig(customNotifierOptions)” importumuzu eklemeyi unutmayalım son görüntümüz ise şu şekilde.

Bundan sonra ise projemizde oluşturduğumuz, kullanacağımız componentimizin “.ts” uzatanlı dosyamıza gitmemiz gerekli ben örnek olması açısından projemde ki “login” componentimi kullanacağım. Öncelikle “private readonly notifier:NotifierService;” isimli bir değişken tanımlayalım component classımızın içerisinde. Daha sonra ise constructor blogumuz içerisinde görüntümüz bu şekilde olmalıdır.

Notifylarımızı nasıl kullanacağımızla alakalı örnek vermemiz gerekirse kullanımlar aşağıda ki gibidir.

this.notifier.notify(‘success’, “Giriş Başarılı Yönlendiriliyorsunuz…”);

this.notifier.notify(‘error’, ‘Lütfen E-Posta ve Şifrenizi Doğru Girdiğinizden Emin Olunuz !’);

Son olarak ise .html dosyamız içerisinde “” taglarımızı eklememiz gereklidir aksi taktirde notify bildirimlerimiz görüntülenmeyecektir. Bildirimlerimize bir örnek vermek gerekir ise aşağıda ki gibi bir görüntüye sahip olacağız.

Evet yazımızın sonuna geldik. Basit ve yararlı bir konu olduğunu düşünüyorum. Tarık şurası eksik, burası şöyle olsaydı daha güzel olduğunu yerleri lütfen bana bildirin iyi çalışmalar dilerim.. :]