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

Requirements

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: http://127.0.0.1:8000/patients.

Features

• 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:

dynamictable.component.ts

dynamictable.component.html

dynamictable.css

Screenshots :

Github link : https://github.com/ayoubbensakhria/django-api-to-angular-dynamic-table/