initiale Entwicklung

src/app/components/blog-post.component.ts

@@ -0,0 +1,57 @@
+// src/app/components/blog-post/blog-post.component.ts
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { BlogService } from '../services/blog.service';
+import { FooterComponent } from './footer.component';
+import { HeaderComponent } from './header.component';
+
+@Component({
+  selector: 'app-blog-post',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent, FooterComponent],
+  template: `
+    <app-header></app-header>
+    @if(safeContent){
+    <section class="py-20 bg-gray-200 m-auto" data-aos="fade-up">
+      <div class="container mx-auto px-6 max-w-[1024px]">
+        <button (click)="goBack()" class="text-blue-600 hover:underline mb-4">← Back to Latest Insights</button>
+        <h2 class="text-3xl font-bold mb-4">{{ post?.title }}</h2>
+        <img [src]="post?.image" [alt]="post?.title" class="rounded-lg mb-6 shadow-lg w-full h-auto object-cover" />
+        <div class="text-gray-700" [innerHTML]="safeContent"></div>
+      </div>
+    </section>
+    }
+    <app-footer></app-footer>
+  `
+})
+export class BlogPostComponent implements OnInit {
+  post: any;
+  safeContent: SafeHtml | null = null;
+
+  constructor(
+    private route: ActivatedRoute, 
+    private router: Router,
+    private blogService: BlogService,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  ngOnInit() {
+    const postId = this.route.snapshot.paramMap.get('id');
+    this.post = this.blogService.getPost(postId);
+
+    if (this.post && this.post.content) {
+      this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.post.content);
+    } else {
+      // Redirect to a 404 page or display an error message
+      this.router.navigate(['**']);
+    }
+  }
+  ngAfterViewInit(){
+    
+  }
+  goBack() {
+    this.router.navigate(['']);
+  }
+}