Bootstrap ng mit eingebaut

angular.json

@@ -17,7 +17,8 @@
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
+              "zone.js",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
@@ -27,6 +28,7 @@
               }
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -75,7 +77,8 @@
           "options": {
             "polyfills": [
               "zone.js",
-              "zone.js/testing"
+              "zone.js/testing",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [

package.json

@@ -18,6 +18,9 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"
@@ -26,6 +29,7 @@
     "@angular-devkit/build-angular": "^18.2.15",
     "@angular/cli": "^18.2.15",
     "@angular/compiler-cli": "^18.2.0",
+    "@angular/localize": "^18.2.0",
     "@types/jasmine": "~5.1.0",
     "@types/lodash": "^4.17.16",
     "jasmine-core": "~5.2.0",

src/app/app.component.html

@@ -1,13 +1,45 @@
 <main class="main">
-  <div class="content">
-    <h2>Letzte 24 Stunden</h2>
-    <app-test duration="P1D"></app-test>
-    <h2>Letzte 7 Tage</h2>
-    <app-test duration="P7D"></app-test>
-    <h2>Letzte 30 Tage</h2>
-    <app-test duration="P30D"></app-test>
-    <h2>Letzte 365 Tage</h2>
-    <app-test duration="P365D"></app-test>
+  <div ngbAccordion>
+    <div ngbAccordionItem>
+      <h2 ngbAccordionHeader>
+        <button ngbAccordionButton>Letzte 24 Stunden</button>
+      </h2>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template><app-test duration="P1D"></app-test></ng-template>
+        </div>
+      </div>
+    </div>
+    <div ngbAccordionItem>
+      <h2 ngbAccordionHeader>
+        <button ngbAccordionButton>Letzte 7 Tage</button>
+      </h2>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template><app-test duration="P7D"></app-test></ng-template>
+        </div>
+      </div>
+    </div>
+    <div ngbAccordionItem>
+      <h2 ngbAccordionHeader>
+        <button ngbAccordionButton>Letzte 30 Tage</button>
+      </h2>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template><app-test duration="P30D"></app-test></ng-template>
+        </div>
+      </div>
+    </div>
+    <div ngbAccordionItem>
+      <h2 ngbAccordionHeader>
+        <button ngbAccordionButton>Letzte 365 Tage</button>
+      </h2>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template><app-test duration="P365D"></app-test></ng-template>
+        </div>
+      </div>
+    </div>
   </div>
 </main>
 <!--<router-outlet />-->

src/app/app.component.ts

@@ -1,23 +1,15 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { TestComponent } from "./test/test.component";
-import { Statistics } from './statistics';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, TestComponent],
+  imports: [RouterOutlet, TestComponent, NgbModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'test1';
-  statistics: Statistics = {
-    timestampStart: 1,
-    timestampEnd: 2,
-    producedEnergy: 3,
-    injectedEnergy: 4,
-    obtainedEnergy: 5,
-    savedMoney: 6
-  }
 }

src/app/test/test.component.html

@@ -7,5 +7,6 @@
     <p>Ins Netz eingespeiste Energie: {{ getKwh(statistics.injectedEnergy) }} kWh</p>
     <p>Mit Photovoltaik erzeugte Energie: {{ getKwh(statistics.producedEnergy) }} kWh</p>
     <p>- davon selbst genutzt: {{ getKwh(statistics.producedEnergy - statistics.injectedEnergy) }} kWh</p>
+    <p>Kosten: {{ getMoney(statistics.payedMoney) }} €</p>
     <p>Gespartes Geld: {{ getMoney(statistics.savedMoney) }} €</p>
 </div>

src/index.html

@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
 </body>
 </html>

src/main.ts

@@ -1,3 +1,5 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';

tsconfig.app.json

@@ -4,7 +4,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
     "src/main.ts"

tsconfig.spec.json

@@ -5,7 +5,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [