Metabase Angular Embedded JS Sample

This project demonstrates how to embed Metabase dashboards in an Angular application using two different approaches.

Configuration

Configure your Metabase instance in src/index.html:

defineMetabaseConfig({
  "useExistingUserSession": true,
  "instanceUrl": "http://localhost:3000",  // Your Metabase URL
  "theme": {
    "colors": {
      "brand": "red",  // Customize theme colors
    },
  },
});

Components

The application includes two dashboard components showcasing different implementation approaches:

1. ProceduralDashboardComponent

• Location: src/app/procedural-dashboard.component.ts
• Approach: Uses Renderer2.createElement() and setAttribute() to create dashboard elements programmatically
• Usage:

<procedural-dashboard 
  [dashboardId]="1" 
  [withTitle]="true" 
  [withDownloads]="false" 
  [drills]="true">
</procedural-dashboard>

2. DeclarativeDashboardComponent

• Location: src/app/declarative-dashboard.component.ts
• Approach: Uses Angular template binding with [attr.] syntax
• Usage:

<declarative-dashboard 
  [dashboardId]="2" 
  [withTitle]="false" 
  [withDownloads]="true" 
  [drills]="false">
</declarative-dashboard>

Development

Start the development server:

ng serve

Navigate to http://localhost:4200/ to see both dashboard components in action.

Building

Build the project:

ng build