58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
// 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(['']);
|
|
}
|
|
}
|