Angular  

How to Build a Dynamic Dashboard in Angular

A Practical, Step-by-Step Guide for Developers

Dashboards are an essential part of modern web applications. Whether you are building an admin panel, analytics system, CRM, or business intelligence tool, dashboards play an important role in displaying actionable data in a structured and interactive way.

A dynamic dashboard allows users to view metrics, charts, tables, and widgets that update in real time or based on user actions. Angular provides excellent tools for building such dashboards thanks to its component-based architecture, data binding, and strong ecosystem of charting libraries.

This article walks you through how to build a dynamic dashboard in Angular using a practical, step-by-step approach. You will learn how to structure dashboard modules, load widgets dynamically, fetch data from APIs, and display charts and cards. By the end, you will be able to build a fully functional, scalable dynamic dashboard suitable for real-world applications.

What Is a Dynamic Dashboard

A dynamic dashboard is a screen that displays multiple real-time or frequently updated data widgets such as:

  • Metrics cards

  • Line charts

  • Bar charts

  • Tables

  • User statistics

  • Revenue analytics

  • Activity feeds

What makes it dynamic?

  • Data loads from APIs

  • Widgets update automatically

  • User can interact with the dashboard

  • Layout can change based on user preference

  • Filtered data updates all widgets

  • Components are reusable and modular

Setting Up the Angular Project

If you are starting fresh, create a new Angular project:

ng new dynamic-dashboard
cd dynamic-dashboard

Install required libraries (optional but recommended):

Chart library (example: ng2-charts):

npm install chart.js ng2-charts

Dashboard Module Structure

A well-organized folder structure is important for scaling your dashboard.

Suggested structure:

src/app/
  features/
    dashboard/
      components/
        metric-card/
        bar-chart/
        line-chart/
        data-table/
      pages/
        main-dashboard/
      services/
        dashboard.service.ts
      dashboard.module.ts

Organizing widgets under components improves maintainability.

Creating a Dashboard Page

Create the main dashboard page:

ng generate component features/dashboard/pages/main-dashboard

This component will host all widgets.

Example main-dashboard.component.html:

<div class="dashboard-container">

  <app-metric-card
    title="Total Users"
    [value]="stats.totalUsers">
  </app-metric-card>

  <app-metric-card
    title="Monthly Revenue"
    [value]="stats.revenue">
  </app-metric-card>

  <app-line-chart
    [data]="chartData">
  </app-line-chart>

  <app-data-table
    [rows]="tableData">
  </app-data-table>

</div>

Creating a Metric Card Component

Metric cards display single numeric values such as users, revenue, or orders.

ng generate component features/dashboard/components/metric-card

metric-card.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-metric-card',
  templateUrl: './metric-card.component.html',
  styleUrls: ['./metric-card.component.css']
})
export class MetricCardComponent {
  @Input() title!: string;
  @Input() value!: number;
}

metric-card.component.html:

<div class="metric-card">
  <h4>{{ title }}</h4>
  <p>{{ value }}</p>
</div>

Metric cards are reusable across the dashboard.

Creating Chart Widgets

Charts help visualize trends. Using ng2-charts, create a line chart component.

ng generate component features/dashboard/components/line-chart

line-chart.component.ts:

import { Component, Input } from '@angular/core';
import { ChartData } from 'chart.js';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html'
})
export class LineChartComponent {
  @Input() data!: ChartData<'line'>;
}

line-chart.component.html:

<div style="height: 300px;">
  <canvas baseChart
    [data]="data"
    chartType="line">
  </canvas>
</div>

Now your dashboard can display dynamic charts, updated by user interaction or API calls.

Creating the Dashboard Service

The dashboard service is responsible for fetching data from the backend API.

ng generate service features/dashboard/services/dashboard

dashboard.service.ts:

@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  constructor(private http: HttpClient) {}

  getStatistics() {
    return this.http.get('/api/dashboard/stats');
  }

  getChartData() {
    return this.http.get('/api/dashboard/chart');
  }

  getRecentUsers() {
    return this.http.get('/api/dashboard/users');
  }
}

This centralizes API calls.

Connecting API Data to the Dashboard

In main-dashboard.component.ts:

export class MainDashboardComponent implements OnInit {

  stats: any = {};
  chartData: any = {};
  tableData: any[] = [];

  constructor(private dashboardService: DashboardService) {}

  ngOnInit(): void {
    this.loadStatistics();
    this.loadChartData();
    this.loadTableData();
  }

  loadStatistics() {
    this.dashboardService.getStatistics().subscribe(res => {
      this.stats = res;
    });
  }

  loadChartData() {
    this.dashboardService.getChartData().subscribe(res => {
      this.chartData = {
        labels: res.labels,
        datasets: [
          { data: res.values, label: 'Performance' }
        ]
      };
    });
  }

  loadTableData() {
    this.dashboardService.getRecentUsers().subscribe(res => {
      this.tableData = res;
    });
  }
}

This integrates all widgets into a functional dashboard.

Adding a Dynamic Data Table

Create a reusable table component:

ng generate component features/dashboard/components/data-table

data-table.component.ts:

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html'
})
export class DataTableComponent {
  @Input() rows: any[] = [];
}

data-table.component.html:

<table>
  <thead>
    <tr>
      <th *ngFor="let key of rows[0] | keyvalue">{{ key.key }}</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let key of row | keyvalue">{{ key.value }}</td>
    </tr>
  </tbody>
</table>

This builds a dynamic, framework-like table.

Adding Filters for Dynamic Updates

A dynamic dashboard often includes filters such as:

  • Date range

  • Category

  • User role

  • Status

Create a filter example:

main-dashboard.component.html:

<select (change)="applyFilter($event.target.value)">
  <option value="monthly">Monthly</option>
  <option value="weekly">Weekly</option>
  <option value="yearly">Yearly</option>
</select>

Apply filter:

applyFilter(range: string) {
  this.dashboardService.getChartData(range).subscribe(res => {
    this.chartData = {
      labels: res.labels,
      datasets: [
        { data: res.values, label: 'Performance' }
      ]
    };
  });
}

Making Dashboard Layout Responsive

Use a grid layout to make the dashboard responsive:

dashboard.component.css:

.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

This ensures proper rendering on desktop, tablet, and mobile.

Using Dynamic Component Loading (Advanced)

Sometimes you want the user to choose which widgets to show.

Angular allows dynamic component loading using ViewContainerRef.

Example:

@ViewChild('widgetContainer', { read: ViewContainerRef })
container!: ViewContainerRef;

loadWidget(component: any) {
  this.container.clear();
  this.container.createComponent(component);
}

This makes your dashboard fully customizable.

Role-Based Dashboard (Enterprise Use Case)

Enterprise dashboards display different widgets based on user roles.

Example:

if (user.role === 'Admin') {
  this.widgets = ['users', 'revenue', 'logs'];
}
else {
  this.widgets = ['orders', 'profile'];
}

Use *ngFor to load the correct widgets.

Best Practices for Building Dashboards in Angular

  1. Create reusable components for widgets.

  2. Store all API calls in dedicated services.

  3. Use feature modules (dashboard.module.ts).

  4. Keep components small and focused.

  5. Use chart libraries that support responsive design.

  6. Cache data when possible to improve performance.

  7. Avoid loading all widgets at once for large dashboards.

  8. Use lazy loading for dashboard routes in enterprise apps.

Recommended Libraries for Dashboards

Choosing the right libraries improves design and performance.

Chart Libraries

  • Chart.js with ng2-charts

  • ngx-charts

  • ApexCharts

  • ECharts for Angular

UI Components

  • Angular Material

  • PrimeNG

  • Nebular

  • NG-Zorro

These help build professional-looking dashboards with minimal effort.

Conclusion

Building a dynamic dashboard in Angular involves designing reusable components, integrating API data, handling interactions with filters, and selecting appropriate charting and UI libraries. By splitting dashboards into modular components such as metric cards, charts, and tables, you create a maintainable structure that can grow as your application expands.

A well-built dashboard enhances user experience and enables businesses to monitor metrics, visualize patterns, and make informed decisions.

Membership not found