updated tyoes

Author: NevRA

src/app/app.html

@@ -7,17 +7,17 @@
     <h1>Metabase Dashboards</h1>
 
     <procedural-dashboard 
-      dashboardId="1" 
-      withTitle="true" 
-      withDownloads="false" 
-      drills="true">
+      [dashboardId]="1" 
+      [withTitle]="true" 
+      [withDownloads]="false" 
+      [drills]="true">
     </procedural-dashboard>
 
     <declarative-dashboard 
-      dashboardId="2" 
-      withTitle="false" 
-      withDownloads="true" 
-      drills="false">
+      [dashboardId]="2" 
+      [withTitle]="false" 
+      [withDownloads]="true" 
+      [drills]="false">
     </declarative-dashboard>
   </div>
 </main>

src/app/declarative-dashboard.component.ts

@@ -29,8 +29,8 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class DeclarativeDashboardComponent {
-  @Input() dashboardId: string = '1';
-  @Input() withTitle: string = 'true';
-  @Input() withDownloads: string = 'false';
-  @Input() drills: string = 'true';
+  @Input() dashboardId: number = 1;
+  @Input() withTitle: boolean = true;
+  @Input() withDownloads: boolean = false;
+  @Input() drills: boolean = true;
 }

src/app/procedural-dashboard.component.ts

@@ -22,10 +22,10 @@ import { Component, OnInit, ElementRef, Renderer2, Input } from '@angular/core';
   `]
 })
 export class ProceduralDashboardComponent implements OnInit {
-  @Input() dashboardId: string = '1';
-  @Input() withTitle: string = 'true';
-  @Input() withDownloads: string = 'false';
-  @Input() drills: string = 'true';
+  @Input() dashboardId: number = 1;
+  @Input() withTitle: boolean = true;
+  @Input() withDownloads: boolean = false;
+  @Input() drills: boolean = true;
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
 
@@ -37,10 +37,10 @@ export class ProceduralDashboardComponent implements OnInit {
     const container = this.elementRef.nativeElement.querySelector('#metabase-container');
     if (container) {
       const dashboard = this.renderer.createElement('metabase-dashboard');
-      this.renderer.setAttribute(dashboard, 'dashboard-id', this.dashboardId);
-      this.renderer.setAttribute(dashboard, 'with-title', this.withTitle);
-      this.renderer.setAttribute(dashboard, 'with-downloads', this.withDownloads);
-      this.renderer.setAttribute(dashboard, 'drills', this.drills);
+      this.renderer.setAttribute(dashboard, 'dashboard-id', String(this.dashboardId));
+      this.renderer.setAttribute(dashboard, 'with-title', String(this.withTitle));
+      this.renderer.setAttribute(dashboard, 'with-downloads', String(this.withDownloads));
+      this.renderer.setAttribute(dashboard, 'drills', String(this.drills));
       this.renderer.appendChild(container, dashboard);
     }
   }