Angular Dynamic Table with Django API

This component allows you to perform real-time HTTP requests to a Django API (backend), search, and filter data easily and simply.


Let’s assume that you have a Django server up and running on the port 8000. In this example, I’ve created and configured a Django app called patient (backend), so the URL to this API would be:


  • Material Design table
  • Auto-pagination setup
  • Multi-parameter search
  • Debouncer (search delay)
  • Filter by date
  • Waiting Spinner
  • Error Handler

Frontend: create a new component called : dynamictable:

  ng g c components/dynamictable

Modify the component’s elements as follows:




Screenshots :

alt sc
Capture d’écran 2020-05-22 à 00.05.47.png

Github link :

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

Open chat
Powered by