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.