A Useful, Detailed Guide for Developers
In contemporary online applications, dashboards are a crucial component. Dashboards are crucial for presenting actionable data in an organized and dynamic manner, whether you are developing an admin panel, analytics system, CRM, or business intelligence tool. Users can see metrics, tables, charts, and widgets that change in real time or in response to user input on a dynamic dashboard. Angular's component-based architecture, data coupling, and robust ecosystem of charting libraries make it a perfect platform for creating such dashboards.
This post takes you step-by-step and practically through the process of creating a dynamic dashboard in Angular. You will discover how to display charts and cards, obtain data from APIs, load widgets dynamically, and organize dashboard components. You will be able to create a dynamic dashboard that is scalable, fully functional, and appropriate for practical use at the end.
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
- Create reusable components for widgets.
- Store all API calls in dedicated services.
- Use feature modules (dashboard.module.ts).
- Keep components small and focused.
- Use chart libraries that support responsive design.
- Cache data when possible to improve performance.
- Avoid loading all widgets at once for large dashboards.
- 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
Creating reusable components, integrating API data, managing filter interactions, and choosing the right charting and user interface frameworks are all necessary when creating a dynamic dashboard in Angular. Dashboards can be made more manageable as your application grows by breaking them up into modular parts like tables, charts, and metric cards.
In addition to improving user experience, a well-designed dashboard helps companies track metrics, see trends, and make wise choices.