<div class="card">
            <div class="card-header d-flex justify-content-between">
                <div class="header-title">
                    <h4 class="card-title">A Basic Message</h4>
                    <p>A short communication sent from one person to another or the central theme or idea of a
                        communication.</p>
                </div>
            </div>
            <div class="card-body text-center">
                <button (click)='Sweetalert()'  id="sweetalert-basic" class="btn btn-primary ">Try Me</button>
            </div>
        </div>
        

export class SweetAlertComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
   Sweetalert() {
    Swal.fire({
        title: 'Hello! This is a Basic Message.',
        backdrop: `rgba(60,60,60,0.8)`,
    })
  }
  }
        

  <div class="card">
            <div class="card-header d-flex justify-content-between">
                <div class="header-title">
                    <h4 class="card-title">Title with a Text</h4>
                    <p>Image title text is an attribute used to provide additional information about the image as well
                        as displayed as a tooltip. </p>
                </div>
            </div>
            <div class="card-body text-center">
                <button (click)='sweetalerttitle()' id="sweetalert-title" class="btn btn-primary ">Try Me</button>
             
            </div>
        </div>
        

export class SweetAlertComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
  sweetalerttitle(){
    Swal.fire({
      title: 'The Internet?',
      text: 'That thing is still around? question',
      backdrop: `rgba(60,60,60,0.8)`
    })
  }
  }