Search code examples
javascriptangularsweetalertsweetalert2

Angular 7 Sweet alert show dynamic table


I'm using Sweet alert 2 with Angular 7, And i'm trying to display dynamic table.

Json:

[
  {
    "name": "Steve",
    "age": 23
  },
  {
    "name": "John",
    "age": 30
  },
  {
    "name": "Daniel",
    "age": 18
  }
]

I've tried to use *ngFor but unfortunately,it's not working.

Swal({
  position: 'center',
  type: 'info',
  title: `Class Information`,
  html: `<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr *ngFor="let person of persons">
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
  </tr>
</table>`,
});

Alternative i'm trying to display my own component.

  Swal({
      position: 'center',
      type: 'info',
      title: `Class Information`,
      html: `<class-component [inputClassInformation]="classInformationJson"></class-component>`
    });

This is not working as well.

My goal is display the following pop-up : enter image description here


Solution

  • you need to use ngx-sweetalert2 for Angular 7 to show show dynamic table

    ngx-sweetalert2

    <swal title="Fill the form, rapidly">
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
        <tr *ngFor="let person of persons">
          <td>{{person.name}}</td>
          <td>{{person.age}}</td>
        </tr>
      </table>
    </swal>