CODEWITHSUNDEEP
angulardatatablesangular-datatables
Jhon Estrada
Jhon Estrada

Reputation: 119

Angular 16 with datatables

I'm learning Angular, so currently I'm consuming one endpoint of CoinGecko and I just want show the list using datatables, so this is my code:

<div class="w-3/4 mx-auto mt-5">
  <div class="block p-4 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
    <h1 class="mx-auto mb-4 text-2xl font-extrabold dark:text-white">
      List CoinGecko
    </h1>    
    <table datatable [dtOptions]="dtOptions" class="row-border hover">
      <thead class="border-b font-medium dark:border-neutral-500">
        <tr>
          <th *ngFor="let title of titles">
            {{ title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let coin of coins; let i = index">
          <td>{{ i + 1 }}</td>
          <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white flex">
            <img
              [src]="coin.image"
              alt="{{ coin.name }}"
              style="width: 2rem"
              class="img-fluid me-4"
            />
            <span>{{ coin.name }}</span>
            <span class="ms-3 text-muted text-uppercase">{{ coin.symbol }}</span>
          </td>
          <td>{{ coin.current_price.toLocaleString() }}</td>
    
          <td
            [ngClass]="
              coin.price_change_percentage_24h > 0
                ? 'text-success'
                : 'text-danger'
            "
          >
            {{ coin.price_change_percentage_24h }}
          </td>
          <td>{{ coin.total_volume.toLocaleString() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

and my component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface ICoin {
  id: string;
  image: string;
  name: string;
  symbol: string;
  current_price: number;
  price_change_percentage_24h: number;
  total_volume: number;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  dtOptions: DataTables.Settings = {};
  api: string =
    'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false';
  coins: ICoin[] = [];
  titles: string[] = ['#', 'Coin', 'Price', 'Price Change', '24H Volume'];
  
  constructor(private http: HttpClient){}

  ngOnInit(): void { 
    this.http.get<ICoin[]>(this.api).subscribe(
      (res) => {
        this.coins = res;
      },
      (err) => console.error(err)
    );
    this.dtOptions = {
      pagingType: 'full_numbers'
    };
  }
}

so I'm getting one issue, initially when loading the information provided by the API is listed, but if I try filter the data or show 20 entries option, or order by any field, the information is not display in the table, why?

Upvotes: 1

Views: 2032

Answers (1)

Sundar Garud
Sundar Garud

Reputation: 41

Here Data Table is not functioning properly So try adding following code in your table definition :

*<table datatable [dtOptions]="dtOptions" class="row-border hover"
*ngIf="titles.length !=0 && coins.length != 0" >*

Upvotes: 0

Related Questions