0

so I need to sort my table by the duration of the songs and I'm kind of lost, I'm learning Angular so I would appreciate your help. I'll post some of my code.

What I would need is to order the preview column that has the elements.

  <div>
    <table class="table">
      <thead>
        <tr>
          <th class="styled-tableheader">
                  Preview
        </th>
          <th class="styled-tableheader">Like it!</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let track of albumTracks">
          <td>
            <iframe
            [src]="track.uri | domsanitizer"
            width="320"
            height="90"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
          </td>
          <td>
            <button (click)="addToPlaylist( track )" type="button" class="myButton">Add to playlist!</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Here's the component. From here I get the data, the property that I would need from "albumTracks" would be "duration_ms"

getAlbumTracks( id:string ){
  debugger;
  this.spotify.getAlbumsTracks( id ).subscribe( albumTracks => {
    this.albumTracks=albumTracks;
    console.log(albumTracks);
  } )
}

If you could help, I'll really appreciate it. Thank you very much.

HDJEMAI
  • 9,436
  • 46
  • 67
  • 93
Ricardo Galan
  • 37
  • 4
  • This will probably help: [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value) – HDJEMAI May 02 '19 at 00:24
  • What exactly in sorting do you need help with? You can create a custom angular pipe to sort your data and use something like `*ngFor='let track of albumTracks | sortPipe : {order: selectedOrder}' ` . I'll try to add a stackblitz later on, but meanwhile refer to the documentation. https://angular.io/guide/pipes – shark1608 May 02 '19 at 00:37
  • @shark1608 I receive a property from albumTracks called duration_ms. I need it to order the table rows by that property. Thank you very much. If you could help me with that pipe it would be really helpful. Would it be a problem if I wanted the pipe to work onClick? – Ricardo Galan May 02 '19 at 03:06
  • You could use `@angular/material/sort` to add sorting capabilities to your table. Follow [this example](https://material.angular.io/components/sort/examples) implementation. – frido May 02 '19 at 09:04
  • @fridoo hey Fridoo thank you so much. But I wouldn't like to use angular material if it is possible. – Ricardo Galan May 02 '19 at 12:56

0 Answers0