How to Build a Responsive Dashboard Using Angular and PrimeNG

Rajesh Gami
Nov 05
1.3k
0
0

Article

Modern web applications need beautiful dashboards that work smoothly on both desktop and mobile screens.
With Angular for structure and PrimeNG for ready-made UI components, you can easily create a responsive dashboard that looks professional and performs fast.

Let’s learn step-by-step how to build one.

🧩 What is PrimeNG?

PrimeNG is a powerful UI component library for Angular.
It includes more than 90+ components — like tables, charts, cards, dialogs, dropdowns, and calendars — all designed with a clean look and responsive design.

Using PrimeNG, you can focus more on your business logic instead of designing everything from scratch.

⚙️ Step 1: Set Up Your Angular Project

First, create a new Angular project.

ng new angular-dashboard
cd angular-dashboard

Install PrimeNG and PrimeIcons:

npm install primeng primeicons

Then, open your angular.json file and add PrimeNG themes and icons under styles and scripts.

"styles": [
  "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  "src/styles.css"
]

🏗️ Step 2: Create a Dashboard Module

Organize your app properly. Create a separate dashboard module and component.

ng generate module dashboard --routing
ng generate component dashboard

Add the route in app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent }
];

🎨 Step 3: Design the Dashboard Layout

Use PrimeNG Grid System (p-grid, p-col) for a responsive layout.

<div class="p-grid p-nogutter p-justify-between p-align-start dashboard">
  <div class="p-col-12 p-md-4">
    <p-card header="Total Orders" subheader="This Month">
      <h2>1,250</h2>
    </p-card>
  </div>

  <div class="p-col-12 p-md-4">
    <p-card header="Active Users" subheader="Today">
      <h2>890</h2>
    </p-card>
  </div>

  <div class="p-col-12 p-md-4">
    <p-card header="Revenue" subheader="This Month">
      <h2>₹ 5,40,000</h2>
    </p-card>
  </div>
</div>

Here:

On desktop, it shows 3 cards in one row.
On mobile, it automatically stacks vertically.

📊 Step 4: Add Charts with PrimeNG Chart Component

Install Chart.js:

npm install chart.js

Then, import ChartModule in your dashboard.module.ts:

import { ChartModule } from 'primeng/chart';

@NgModule({
  declarations: [DashboardComponent],
  imports: [CommonModule, ChartModule]
})
export class DashboardModule { }

Now, add a sales chart inside your dashboard.

<p-card header="Monthly Sales">
  <p-chart type="bar" [data]="salesData" [options]="chartOptions"></p-chart>
</p-card>

dashboard.component.ts

salesData = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    {
      label: 'Sales',
      backgroundColor: '#42A5F5',
      data: [120000, 150000, 170000, 140000, 180000, 200000]
    }
  ]
};

chartOptions = {
  responsive: true,
  maintainAspectRatio: false
};

This will create a beautiful bar chart showing monthly sales.

💡 Step 5: Add Responsive Sidebar and Navbar

PrimeNG provides a powerful p-sidebar and p-menubar to create navigation.

<p-sidebar [(visible)]="sidebarVisible" [baseZIndex]="10000">
  <h3>Menu</h3>
  <ul>
    <li><a routerLink="/dashboard">Dashboard</a></li>
    <li><a routerLink="/reports">Reports</a></li>
    <li><a routerLink="/settings">Settings</a></li>
  </ul>
</p-sidebar>

<button pButton type="button" icon="pi pi-bars" (click)="sidebarVisible = true"></button>

dashboard.component.ts

sidebarVisible: boolean = false;

This makes the app mobile-friendly — users can open/close the sidebar easily on small screens.

🧭 Flowchart: Dashboard Data Flow

        ┌────────────────────────┐
        │  API / Database        │
        └───────────┬────────────┘
                    │
                    ▼
        ┌────────────────────────┐
        │  ASP.NET Core API       │
        └───────────┬────────────┘
                    │
                    ▼
        ┌────────────────────────┐
        │  Angular Service (HTTP) │
        └───────────┬────────────┘
                    │
                    ▼
        ┌────────────────────────┐
        │  Dashboard Component    │
        │ (PrimeNG Cards + Chart) │
        └────────────────────────┘

🧠 Step 6: Connect with Backend API (ASP.NET Core)

Your Angular dashboard can call APIs from ASP.NET Core to fetch live data.

dashboard.service.ts

getDashboardData(): Observable<any> {
  return this.http.get('https://api.yourdomain.com/dashboard');
}

dashboard.component.ts

ngOnInit() {
  this.dashboardService.getDashboardData().subscribe(data => {
    this.salesData.datasets[0].data = data.monthlySales;
  });
}

This makes your dashboard dynamic and real-time.

🪄 Step 7: Add Styling (Optional)

You can add your own styling in dashboard.component.css:

.dashboard p-card {
  margin-bottom: 1rem;
  text-align: center;
}

h2 {
  color: #007ad9;
}

🏁 Final Output

Your dashboard will have:

✅ Responsive layout (3 cards per row on desktop, 1 on mobile)
✅ Bar chart for monthly sales
✅ Sidebar menu and top navbar
✅ Live data integration with API

💬 Summary

Building a responsive dashboard in Angular using PrimeNG is fast and flexible.
PrimeNG’s ready UI components — cards, charts, grids, and sidebars — save development time and give a clean look.
Combine it with ASP.NET Core APIs, and you can deliver a powerful, real-time dashboard for your ERP, CRM, or analytics projects.