Extended project page a little bit

src/app/layout/imageDialog/image.component.ts

@@ -0,0 +1,69 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule, MatIconModule],
+  template: `
+    <div class="dialog">
+      <div class="topbar">
+        <div class="title">{{ data.title }}</div>
+        <button mat-icon-button mat-dialog-close aria-label="Schließen">
+          <mat-icon>close</mat-icon>
+        </button>
+      </div>
+
+      <div class="stage">
+        <img class="full" [src]="data.src" [alt]="data.title" />
+      </div>
+    </div>
+  `,
+  styles: [`
+    .dialog {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .topbar {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+
+      padding: 14px 16px;
+    }
+
+    .title {
+      font-weight: 600;
+      line-height: 1.2;
+      max-width: calc(100% - 56px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .stage {
+      flex: 1 1 auto;
+      padding: 0 16px 16px;
+      min-height: 0;
+      display: grid;
+      place-items: center;
+    }
+
+    .full {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      border-radius: 12px;
+    }
+  `],
+})
+export class ImageDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { title: string; src: string }) {
+    console.log(data.title);
+  }
+}