Toastr Nedir? Angular ile Toastr Kullanımı
Toastr Nedir? Web Uygulamalarında Ne İçin Kullanılır?
Toastr kullanıcıya anlamlı bir mesaj vererek yaptığı işlemdeki durumu anlamasını sağlayan mesajlardır.
Örneğin;
Bir kullanıcının; kullanıcı adı veya şifresini yanlış girdiğinde: Error mesajı olarak bir Toastr baloncuğu gösterirsiniz. İşlem hatalı değilse veya bilgilendirici bir işlem gerektiğinde Info baloncuğu göstermek isteyebilirsiniz.
Bu yazıda; Toastr kütüphanesini, Angular’da nasıl kullanırız bunlardan bahsetmeye çalışacağım.
ng new ngx-toastr-exampleProjemizi oluşturduktan sonra istediğimiz editörde açalım ve hızlıca işlemlerimize başlayalım. Ben IDE olarak Visual Studio Code kullanıyorum.
2- Projede tasarımla çok uğraşmamak adına bootstrap kütüphanesini ve toastr paketimizi ekleyelim.
1-) npm install bootstrap
2-) npm install ngx-toastrBootstrap’ı ve toastr paketini yükledikten sonra Angular.json dosyamıza görseldeki gibi css dosyalarınız eklemeniz gerekiyor.
Gerekli işlemleri yaptıktan sonra ng serve komutuyla projemizi ayağa kaldıralım.
Projemizdeki statik olarak yazdığımız mock dataları kullanacağımız dosya içeriğini düzenleyelim.
Servisleri ve dosya yapısını ben görseldeki gibi yaptım siz dilediğiniz gibi kurgulayabilirsiniz.
Normalde servislerimizdeki dataları bir yerlerden dinamik olarak alırız fakat burada örnek teşkil etmesi açısından dataları hard-coded olarak girdim.
mock-datas.service.ts:
Öncelikle constructor’ımıza ToastrService’imizi ekliyoruz ve metodlarımızı aşağıdaki gibi yazıyoruz.
toastr.service.ts
Serviseleri yazdık. AppModule dosyamızda gerekli tanımlamaları aşağıdaki gibi güncelledikten sonra, html yapımızı oluşturalım ve servisimizden dataları çekelim.
AppModule.ts dosyamızı aşağıdaki gibi güncelleyelim.
Servislerimizi de ekledikten sonra artık kodlarımızı yazmaya başlayalım.
app.component.html sayfasında toasterNames’lerimizdeki dataları çekiyoruz.
app.component.html:
app.component.css
Servislerimizi oluşturduk, html ve css yapımız tamamlandı. Son olarak servislerini yazdığımız metodları kullanmamıza geldi. Burada yazdığımız servisleri AppComponent’in constructor’ında çekmemiz gerekmektedir ki servislerimizi kullanabilelim. Constructor tanımlamaları bittikten sonra ngOnInit metodunun içerisinde toastrNames’lerimizi çekiyoruz. Ve son olarak showToaster metodu ile toaster koşullarını tanımlıyoruz.
AppComponent.ts:
Projemizin kodlarını tamamlamış olduk. Detaylı incelemek isterseniz github üzerinden projeyi indirip kaynak dosyaları inceleyebilirsiniz. Projemizin son hali aşağıdaki gibidir.
ngx-toastr ile ilgili detaylı ayarlar için ngx-toastr’ın dökümantasyonunu inceleyebilirsiniz.
Hoşçakalın :)
