How to Create Dashboard in Angular: 2025 Guide

Introduction

Angular has evolved dramatically in the past two years. With the introduction of Angular v19, Signals, Zoneless change detection, and built-in Server-Side Rendering (SSR) support, building interactive dashboards in Angular is now faster, more performant, and more maintainable than ever.

This comprehensive guide walks you through creating powerful dashboards in Angular, starting with modern Angular v19 patterns, then showing you how to supercharge your dashboards with Databrain's embedded analytics platform.

What you'll build:

A modern Angular v19 dashboard with SSR support
Integration with Databrain for production-ready analytics

Prerequisites:

Node.js 20+ and npm 10+
Basic Angular knowledge
Familiarity with TypeScript (recommended

Without Databrain - Building an Interactive Angular Dashboard

Let's start by building a custom dashboard to understand the fundamentals, then we'll integrate Databrain for production-ready features.

Getting started with Angular V19

Angular v19 introduces a revolutionary approach with standalone components, built-in SSR, and Signals. Let's set up a modern Angular project:
‍

Bash

# Install Angular CLI globally
npm install -g @angular/cli

# Create new project with SSR enabled
ng new dashboard-app --routing --style css --ssr

Key changes from older Angular versions:

`--ssr` flag automatically configures server-side rendering
Zoneless change detection available (no zone.js dependency)
Signals enabled by default for reactive state management
Standalone components are now the default (no NgModule needed)

What's different in 2025:

No `app.module.ts` required (standalone components are default)
`app.config.ts` replaces module configuration
SSR configured out of the box
Better tree-shaking and smaller bundle sizes

Adding Font Awesome Icons

We'll need icons for our dashboard. Install Font Awesome with Angular v19 support:

Bash

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome --save

‍

Font Awesome now works seamlessly with standalone components and is fully tree-shakeable in Angular v19.

Project Structure (Angular V19)

After creation, your project will have this modern structure:

Tree

dashboard-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.config.ts          (new in v19)
│   │   └── app.routes.ts
│   ├── main.ts                     (client entry point)
│   ├── main.server.ts              (SSR entry point)
│   └── index.html
├── server.ts                       (SSR server configuration)
└── angular.json

‍

Building Dashboard Components with Modern Angular

Step 1: Creating the side bar component

Generate a standalone sidebar component:

Bash

ng generate component sidebar

sidebar.component.ts:

TypeScript

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { 
  faHome,
  faChartBar,
  faComment,
  faBookmark,
  faUser,
  IconDefinition
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule, RouterModule],
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  home = faHome;
  chart = faChartBar;
  message = faComment;
  bookmark = faBookmark;
  user = faUser;

  menuItems = [
    { label: 'Dashboard', icon: this.home, route: '/dashboard' },
    { label: 'Analytics', icon: this.chart, route: '/analytics' },
    { label: 'Messages', icon: this.message, route: '/messages' },
    { label: 'Collections', icon: this.bookmark, route: '/collections' }
  ];
}

sidebar.component.html:

HTML

<nav class="vertical-navbar">
  <h1>Databrain</h1>
  <ul>
    <li *ngFor="let item of menuItems">
      <a [routerLink]="item.route" routerLinkActive="active">
        <fa-icon [icon]="item.icon"></fa-icon>
        <span class="nav-text">{{ item.label }}</span>
      </a>
    </li>
  </ul>
</nav>

sidebar.component.css:

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
}

.nav-text {
  vertical-align: middle;
  margin-left: 10px;
}

.vertical-navbar {
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: white;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.vertical-navbar h1 {
  padding: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  border-bottom: 1px solid #e8e8e8;
}

.vertical-navbar ul li {
  padding: 0;
}

.vertical-navbar ul li a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.vertical-navbar ul li a:hover,
.vertical-navbar ul li a.active {
  background: rgba(52, 152, 219, 0.1);
  border-left-color: #3498db;
  color: #3498db;
}

.vertical-navbar ul li fa-icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

@media (max-width: 768px) {
  .vertical-navbar {
    width: 100%;
    height: auto;
    position: relative;
  }
}

Step 2: Creating the Dashboard Component

Generate the main dashboard component:

Bash

ng generate component dashboard

dashboard.component.ts:

TypeScript

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import {
  faPen,
  faPlus,
  faMoneyBill,
  faUsers,
  faClock,
  faBriefcase,
} from '@fortawesome/free-solid-svg-icons';

interface MetricCard {
  title: string;
  value: number;
  change: string;
  iconName: string;
  icon: any;
}

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  // Icons
  edit = faPen;
  create = faPlus;

  // Using Angular Signals for reactive state (v19 best practice)
  metrics = signal<MetricCard[]>([
    {
      title: 'Budget',
      value: 750.9,
      change: '13%',
      iconName: 'budget',
      icon: faMoneyBill
    },
    {
      title: 'New Projects',
      value: 215,
      change: '30%',
      iconName: 'project',
      icon: faUsers
    },
    {
      title: 'Total Hours',
      value: 1400,
      change: '-5%',
      iconName: 'clock',
      icon: faClock
    },
    {
      title: 'Work Load',
      value: 95,
      change: '10%',
      iconName: 'briefcase',
      icon: faBriefcase
    }
  ]);

  // Method to check if change is positive
  isPositiveChange(change: string): boolean {
    return change.startsWith('+') || !change.startsWith('-');
  }
}

dashboard.component.html:

HTML

<div class="dashboard">
  <div class="header">
    <h1 class="dashboard-title">Application Dashboard</h1>
    <div class="button-group">
      <button class="btn-secondary">
        <fa-icon [icon]="edit"></fa-icon> Edit
      </button>
      <button class="btn-primary">
        <fa-icon [icon]="create"></fa-icon> Create
      </button>
    </div>
  </div>

  <div class="tabs">
    <div class="tab active">All Files</div>
    <div class="tab">Shared</div>
    <div class="tab">File Requests</div>
  </div>

  <div class="wrapper">
    <div class="cards-container">
      <div class="card" *ngFor="let metric of metrics()">
        <div class="card-header">
          <div class="card-icon">
            <fa-icon [icon]="metric.icon"></fa-icon>
          </div>
          <h3 class="card-title">{{ metric.title }}</h3>
        </div>
        <div class="card-body">
          <div class="card-value">{{ metric.value }}</div>
          <div class="card-change"
               [ngClass]="{
                 'positive': isPositiveChange(metric.change),
                 'negative': !isPositiveChange(metric.change)
               }">
            {{ metric.change }}
          </div>
        </div>
      </div>
    </div>

    <div class="applications-section">
      <h2>Recent Applications</h2>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>Company</th>
            <th>Offer</th>
            <th>Meeting</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="6" class="empty-state">
              No applications yet. Click "Create" to add one.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

dashboard.component.css:

CSS

.dashboard {
  margin-left: 250px;
  padding: 30px;
  background: #f8f9fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
}

.button-group {
  display: flex;
  gap: 10px;
}

.button-group button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #3498db !important;
  color: white !important;
  border-color: #3498db !important;
}

.btn-primary:hover {
  background: #2980b9 !important;
}

.btn-secondary:hover {
  background: #f8f9fa;
  border-color: #3498db;
  color: #3498db;
}

.tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e8e8e8;
}

.tab {
  cursor: pointer;
  padding: 12px 20px;
  font-weight: 500;
  color: #7f8c8d;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
}

.tab:hover {
  color: #3498db;
}

.tab.active {
  border-bottom-color: #3498db;
  color: #3498db;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #e8e8e8;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.card-icon {
  width: 48px;
  height: 48px;
  background: #ecf0f1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3498db;
  font-size: 20px;
}

.card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-value {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
}

.card-change {
  font-size: 14px;
  font-weight: 500;
}

.card-change.positive {
  color: #27ae60;
}

.card-change.negative {
  color: #e74c3c;
}

.applications-section {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e8e8e8;
}

.applications-section h2 {
  font-size: 20px;
  margin: 0 0 20px;
  color: #2c3e50;
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #f8f9fa;
}

th {
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: #7f8c8d;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

td {
  padding: 16px 12px;
  border-top: 1px solid #e8e8e8;
  color: #2c3e50;
}

.empty-state {
  text-align: center;
  color: #7f8c8d;
  font-style: italic;
  padding: 40px !important;
}

@media (max-width: 768px) {
  .dashboard {
    margin-left: 0;
    padding: 20px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .cards-container {
    grid-template-columns: 1fr;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 8px;
  }
}

Step 3: Setting Up Routing and App Structure

app.routes.ts:

TypeScript

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

export const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, title: 'Dashboard' },
  { 
    path: 'analytics', 
    loadComponent: () => import('./dashboard/dashboard.component')
      .then(m => m.DashboardComponent),
    title: 'Analytics'
  }
];

app.component.ts:

TypeScript

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { SidebarComponent } from './sidebar/sidebar.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, SidebarComponent],
  template: `
    <div class="app-container">
      <app-sidebar></app-sidebar>
      <main class="main-content">
        <router-outlet></router-outlet>
      </main>
    </div>
  `,
  styles: [\`
    .app-container {
      display: flex;
      min-height: 100vh;
      background: #f8f9fa;
    }

    .main-content {
      flex: 1;
    }
  \`]
})
export class AppComponent {
  title = 'Angular Dashboard 2025';
}

app.config.ts:

TypeScript

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration()
  ]
};

‍

Server-Side Rendering (SSR) Setup

Why SSR Matters in 2025

Angular v19 makes SSR incredibly easy and provides significant benefits:

SEO Optimization - Content rendered on server is immediately crawlable
Performance - First Contentful Paint (FCP) improves by 40-60%
Social Sharing - Meta tags render properly for link previews
Accessibility - Better support for screen readers.

Running Your Dashboard

Development Mode (Client-Side Only):

Bash

ng serve

Visit `http://localhost:4200` in your browser.

With Server-Side Rendering:

Bash

# Build for production with SSR
ng build

# Run the SSR server
npm run serve:ssr

Your dashboard now renders on the server first, providing optimal performance and SEO benefits.

Angular v19 Best Practices

1. Use Signals for State Management

Modern Angular v19 uses Signals for reactive state:

TypeScript

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  // ...
})
export class DashboardComponent {
  metrics = signal([]);
  
  totalRevenue = computed(() =>
    this.metrics().reduce((sum, m) => sum + m.value, 0)
  );

  constructor() {
    effect(() => {
      console.log('Metrics updated:', this.metrics());
    });
  }
}

‍

2. Leverage Standalone Components

All modern Angular apps use standalone components (no NgModule):

TypeScript

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule],
  template: `...`
})
export class CardComponent { }

‍

3. Optimize Bundle Size

Tree-shaking - Import only what you need
Lazy loading - Use `loadComponent` in routes
Defer blocks - New in v19 for conditional loading

HTML

@defer (on viewport) {
  <app-heavy-chart></app-heavy-chart>
} @placeholder {
  <p>Loading chart...</p>
}

‍

4. Use OnPush Change Detection

Improve performance with OnPush strategy:

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})

Related Read:

‍

Alternate Solution: With Databrain - Create Angular Dashboards in Minutes

Now that you understand how to build dashboards manually in Angular, let's talk about the reality of production applications.

The Challenge of Custom Dashboards at Scale

Building a dashboard from scratch is excellent for learning, but production dashboards require significantly more:

Real-time data synchronization across multiple data sources
Advanced filtering with dynamic drill-downs and cross-filtering
User permissions and role-based access control (RBAC)
Multi-tenant architecture with data isolation
Scheduled reports and automated email exports
Export capabilities (PDF, CSV, Excel)
50+ chart types and visualizations
Mobile responsiveness across all devices

Building all of this from scratch can take 3-6 months of development time and cost $50,000-$200,000. This is where Databrain becomes valuable.

What is Databrain?

Databrain is an embedded analytics platform that provides production-ready dashboard components designed for modern web applications. It handles the complex infrastructure while letting you focus on your core product.

‍

Step 1: Connect to Your Data Source in Databrain

Before integrating Databrain into your Angular app, you need to set up your data source and create dashboards in the Databrain platform.

Connecting Your Data Source:

1. Sign up at [usedatabrain.com](https://www.usedatabrain.com)

2. Create a workspace for your project

3. Connect your data source:

Click on "Data Sources" in the sidebar
Select your database type (PostgreSQL, MySQL, MongoDB, ClickHouse, etc.)
Enter your database credentials
Test the connection
Save your data source

Supported Data Sources:

PostgreSQL, MySQL, SQL Server, MongoDB
Snowflake, BigQuery, Redshift
ClickHouse, DuckDB, Trino
REST APIs and custom integrations
100+ pre-built connectors

‍

Step 2: Create a Metric in Databrain Dashboard

Once your data source is connected, create visualizations and metrics:

Creating a Metric in Databrain Dashboard:

Access Your Databrain Worskpace
- Log in to your Databrain account and navigate to the workspace where you want to create the dashboard. Workspaces are like project folders where you organize your dashboards and metrics.
Open or Create a Dashboard
- Inside your chosen workspace, you can either open an existing dashboard or create a new one. Dashboards are where you'll display your metrics.
Click on "Create Metric"
- Within the selected dashboard, you'll find an option "Create Metric". Click on this to start creating your new metric.
Choose Metric Type
- Databrain offers different types of metrics. You can select from single values, charts, or tables based on what best suits your data presentation needs.
Define Metric Settings
- If you're creating a chart, you can further customize it by selecting the chart type (e.g., bar chart, line chart), and formatting options (e.g., colors, labels).
Data Visualization
- If you're creating a chart, you can further customize it by selecting the chart type (e.g., bar chart, line chart), and formatting options (e.g., colors, labels
Apply Filters ( If Needed)
- You can add filters to the metric to display specific data subsets. For instance, you can filter data by date, category, or any relevant criteria.
Customize Appearance (If Desired)
- You can customize the appearance of your metric to make it visually appealing. This might include adjusting fonts, colors, and other styling options.
Save Your Metric
- Once you've configured all the settings, make sure to save your metric. This ensures your work is stored and can be accessed later.
View Your Metric on the Dashboard
- Your newly created metric will now appear on the dashboard. You can arrange and organize it on the dashboard as needed.

By following these steps, you can easily create a metric in your Databrain dashboard, enabling you to visualize and present your data in a meaningful way.

‍

Step 3: Setup Angular for Databrain Integration

Now let's integrate your Databrain dashboard into your Angular v19 application.

Install the Required Package

Bash

npm install @databrainhq/plugin

This package provides the web components needed to embed Databrain dashboards in your Angular application.

‍

Step 4: Integrating Databrain Dashboard into Your Angular Application

1. Update app.config.ts (Angular v19 Way)

Since we're using standalone components in Angular v19, we need to configure custom elements support:

TypeScript

import { ApplicationConfig, provideZoneChangeDetection, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration()
  ]
};

2.Create Databrain Dashboard Component

Generate a new component for your Databrain integration:

Bash

ng generate component databrain-dashboard

databrain-dashboard.component.ts:

TypeScript

import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

// Import Databrain web component
import '@databrainhq/plugin/web';

@Component({
  selector: 'app-databrain-dashboard',
  standalone: true,
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './databrain-dashboard.component.html',
  styleUrls: ['./databrain-dashboard.component.css']
})
export class DatabrainDashboardComponent implements OnInit {
  // Replace these with your actual Databrain credentials
  databrainToken = 'your-databrain-token-here';
  dashboardId = 'your-dashboard-id';

  ngOnInit() {
    console.log('Databrain dashboard initialized');
  }
}

databrain-dashboard.component.html:

HTML

<div class="databrain-wrapper">
  <div class="databrain-header">
    <h1>Analytics Dashboard</h1>
    <p>Powered by Databrain</p>
  </div>
  
  <dbn-dashboard
    [token]="databrainToken"
    [dashboard-id]="dashboardId"
    [disable-fullscreen]="false"
    [is-hide-table-preview]="false"
    [is-hide-chart-settings]="false"
    [enable-download-csv]="true"
    [enable-email-csv]="true"
    [enable-multi-metric-filters]="true"
  ></dbn-dashboard>
</div>

databrain-dashboard.component.css:

CSS

.databrain-wrapper {
  margin-left: 250px;
  padding: 30px;
  background: #f8f9fa;
  min-height: 100vh;
}

.databrain-header {
  margin-bottom: 30px;
}

.databrain-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
}

.databrain-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

dbn-dashboard {
  display: block;
  width: 100%;
  min-height: 600px;
}

@media (max-width: 768px) {
  .databrain-wrapper {
    margin-left: 0;
    padding: 20px;
  }
}

‍

3. Update Routes to Include Databrain Dashboard

app.routes.ts:

TypeScript

import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DatabrainDashboardComponent } from './databrain-dashboard/databrain-dashboard.component';

export const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, title: 'Dashboard' },
  { 
    path: 'analytics', 
    component: DatabrainDashboardComponent, 
    title: 'Analytics - Powered by Databrain' 
  }
];

‍

4. Update Sidebar Navigation

Make sure your sidebar links to the new analytics route:

sidebar.component.ts:

TypeScript

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { 
  faHome,
  faChartBar,
  faComment,
  faBookmark,
  IconDefinition
} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [CommonModule, FontAwesomeModule, RouterModule],
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  home = faHome;
  chart = faChartBar;
  message = faComment;
  bookmark = faBookmark;

  menuItems = [
    { label: 'Dashboard', icon: this.home, route: '/dashboard' },
    { label: 'Analytics', icon: this.chart, route: '/analytics' },
    { label: 'Messages', icon: this.message, route: '/messages' },
    { label: 'Collections', icon: this.bookmark, route: '/collections' }
  ];
}

‍

Step 5: Run the Application

After completing the integration, run your Angular application:

Development Mode:

Bash

ng serve

With Server-Side Rendering (Production):

Bash

ng build
npm run serve:ssr

Your application will start, and you can navigate to the Analytics page to see your Databrain dashboard embedded and running.

Make sure to replace `your-databrain-token-here` and `your-dashboard-id` with your actual credentials from the Databrain platform.

‍

Step 6: Customize Your Dashboard

Tweak the Dashboard

Customizing your dashboard lets you tailor it to your specific needs and preferences. Here are few examples of customization you can do:

Drag and Drop: You can rearrange metrics on your dashboard by simply dragging and dropping them. This flexibility allows you to create a visually pleasing layout.
Change Colors: To match your brand or improve data visualization, you can change the colors of charts, including individual elements like bars in a bar chart.
User Permissions: You can choose whether users can modify the dashboard's metrics or not. This control ensures your data remains secure and that the dashboard serves its intended purpose.

Make The Dashboard Accessible

Now that you've connected, created, integrated, and customized your dashboard, it's time to share it with your audience.

While saving the dashboard to a workspace, you can select 'current user' or 'all users.' This decision determines who can access and view the dashboard.

By following these steps, you'll be able to create, customize, and share data-rich dashboards effectively, ensuring your data is both accessible and visually engaging.

‍

Manual Dashboard vs. Databrain: When to Use Each

Feature	Manual Dashboard	Databrain
Time to Deploy	2-6 months	1-2 days
Development Cost	$50,000-$200,000	$99-$499/month
Maintenance	Ongoing dev team	Fully managed
Chart Types	Build each one	50+ pre-built
Data Sources	Custom integration	100+ connectors
Real-time Updates	Build yourself	Built-in
Mobile Responsive	Custom CSS needed	Automatic
RBAC & Security	Build from scratch	Enterprise-ready
Exporting (PDF/CSV)	Build yourself	One-click
Email Reports	Build infrastructure	Built-in scheduler
Best For	Learning, simple dashboards	Production apps, SaaS products

‍

Conclusion

You now have two powerful approaches:

Custom Dashboard (Parts 1-4) - Perfect for learning Angular v19 patterns and simple use cases
Databrain Integration (Part 5) - Production-ready analytics in hours instead of months

For production applications, most teams use a hybrid approach:

Databrain for complex analytics, reporting, and customer-facing dashboards
Custom components for simple metrics and app-specific UI

Next Steps:

Start your free Databrain trial: https://www.usedatabrain.com
View Angular integration docs: https://docs.usedatabrain.com/integrations/angular
Contact support: support@usedatabrain.com

Resources and Documentation

Angular v19 Docs: https://angular.dev
Angular SSR Guide: https://angular.dev/guide/ssr
Databrain Documentation: https://docs.usedatabrain.com
Font Awesome for Angular: https://fontawesome.com/docs/web/use-with/angular
TypeScript Handbook: https://www.typescriptlang.org/docs/

‍

**Angular Dashboard Powered by Databrain**

Related Read:

How to Create Dashboard in Angular

Introduction

Without Databrain - Building an Interactive Angular Dashboard

Getting started with Angular V19

Adding Font Awesome Icons

Project Structure (Angular V19)

Building Dashboard Components with Modern Angular

Step 1: Creating the side bar component

Step 2: Creating the Dashboard Component

Step 3: Setting Up Routing and App Structure

Server-Side Rendering (SSR) Setup

Why SSR Matters in 2025

Running Your Dashboard

Angular v19 Best Practices

1. Use Signals for State Management

2. Leverage Standalone Components

3. Optimize Bundle Size

4. Use OnPush Change Detection

Alternate Solution: With Databrain - Create Angular Dashboards in Minutes

The Challenge of Custom Dashboards at Scale

What is Databrain?

Step 1: Connect to Your Data Source in Databrain

Connecting Your Data Source:

Step 2: Create a Metric in Databrain Dashboard

Creating a Metric in Databrain Dashboard:

Step 3: Setup Angular for Databrain Integration

Install the Required Package

Step 4: Integrating Databrain Dashboard into Your Angular Application

1. Update app.config.ts (Angular v19 Way)

2.Create Databrain Dashboard Component

3. Update Routes to Include Databrain Dashboard

4. Update Sidebar Navigation

Step 5: Run the Application

Step 6: Customize Your Dashboard

Tweak the Dashboard

Make The Dashboard Accessible

Manual Dashboard vs. Databrain: When to Use Each

Conclusion

Next Steps:

Resources and Documentation

FAQs

Make analytics your competitive advantage