Angular ile Sweet Alert 2 kullanımı

Merhaba, Bu yazıda Angular ile sweet alert 2 nasıl kurulur ve nasıl kullanılır bunu anlatacağım. Sweet Alert 2 Angular versiyonunu ngx-sweetalert2 adında bir paket ile kullanabiliyoruz.


İlk olarak şu komut ile kurulumu yapıyoruz;

npm install --save sweetalert2 @sweetalert2/ngx-sweetalert2


app.module.ts içerisinde import ediyoruz;

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

imports: [
  SweetAlert2Module.forRoot()
]


Şuan kullanmaya hazırız. İlk denememizi yapmak için html dosyasında warning örneğimizi yazalım ve deneyelim;

<button [swal]="['Oops!', 'This is not implemented yet :/', 'warning']">
  Do it!
</button>


Buda success denemesi;

<button [swal]="['Good job!', 'You clicked the button!', 'success']">
  Success swal
</button>


Bu en basit kullanım şekilleri bu şekilde. Şimdi biraz detaylandıralım örneğin silme işlemi yapmak için onay almak istersek;

html;

<button [swal]="deleteSwal" (confirm)="deleteMethod()">Sil</button>

<swal
  #deleteSwal
  title="Emin misiniz?"
  text="Silmek istediğiniz veri geri alınamaz."
  type="question"
  [showCancelButton]="true"
  [focusCancel]="true">
</swal>


ts;

deleteMethod() {
  // yaptıracağınız işlemler burada olacak
}


Aynı örneğe şunu ekleyerek hangi butona basarsa bassın modalı kapattıktan sonra çalışacak methodu belirleyebiliriz;

(afterClose)="afterCloseMethod()"

veya (beforeOpen) ile açılmadan önce bir methodu çalıştırabiliriz.



confirm butonunda yazan yazıyı şu şekilde değiştirebiliriz;

[swalOptions]="{ confirmButtonText: 'Onayla' }"


Birde işlem tamamlandıktan sonra tekrar sweetalert'ı tetikleyelim ve işlemin sonuçlandığını gösterelim.

html;

<button [swal]="deleteSwal" (confirm)="deleteMethod()">Sil</button>

<swal
  #deleteSwal
  title="Emin misiniz?"
  text="Silmek istediğiniz veri geri alınamaz."
  type="question"
  [showCancelButton]="true"
  [focusCancel]="true"
  [swalOptions]="{ confirmButtonText: 'Onayla' }">
</swal>

<swal
  #deleted
  title="Silindi"
  text="İşleminiz başarıyla gerçekleştirildi"
  type="success">
</swal>


ts;

@ViewChild('deleted', { static: false }) private deleted: SwalComponent;

deleteMethod() {
  console.log('test');
  this.deleted.fire();
}


Sil butonuna tıkladığımızda swal açılacak Onayla dediğimizde ise deleteMethod içerisindeki işlemleri yapacak ve adı deleted olan swal ı açacak. Burayı servise bağlayıp gelen sonuca göre dinamikte çalıştırabilirsiniz.


Umarım faydalı olmuştur. Daha detaylı incelemek için sweetalert2 dökümantasyonunu buradan inceleyebilirsiniz.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Angular ile Sweet Alert 2 kullanımı" için hiç yorum yapılmadı.

Henüz yorum yapılmamış.

Yorum yap * E-posta adresiniz yayınlanmayacak.