diff --git a/angular-primeng-app/src/app/components/post-details/post-details.component.html b/angular-primeng-app/src/app/components/post-details/post-details.component.html index ef19d4b..7c2ace4 100644 --- a/angular-primeng-app/src/app/components/post-details/post-details.component.html +++ b/angular-primeng-app/src/app/components/post-details/post-details.component.html @@ -30,7 +30,7 @@

{{ post.title }}

-
+
} diff --git a/angular-primeng-app/src/app/components/post-details/post-details.component.ts b/angular-primeng-app/src/app/components/post-details/post-details.component.ts index bd6caf8..24ed9ef 100644 --- a/angular-primeng-app/src/app/components/post-details/post-details.component.ts +++ b/angular-primeng-app/src/app/components/post-details/post-details.component.ts @@ -1,70 +1,71 @@ -import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'; -import { BlogService } from '../../services/blog.service'; -import { AsyncPipe, DatePipe } from '@angular/common'; -import { Post } from '../../models/post'; -import { Observable, Subscription } from 'rxjs'; -import { ActivatedRoute, RouterLink } from '@angular/router'; -import { BlogInfo, BlogLinks } from '../../models/blog-info'; -import { FormsModule } from '@angular/forms'; -import { SidenavComponent } from '../sidenav/sidenav.component'; -import { FooterComponent } from '../footer/footer.component'; -import { ThemeService } from '../../services/theme.service'; +import { Component, inject, Input, OnDestroy, OnInit } from "@angular/core"; +import { BlogService } from "../../services/blog.service"; +import { AsyncPipe, DatePipe } from "@angular/common"; +import { Post } from "../../models/post"; +import { Observable, Subscription } from "rxjs"; +import { ActivatedRoute, RouterLink } from "@angular/router"; +import { BlogInfo } from "../../models/blog-info"; +import { FormsModule } from "@angular/forms"; +import { SidenavComponent } from "../sidenav/sidenav.component"; +import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component"; +import { FooterComponent } from "../footer/footer.component"; +import { ThemeService } from "../../services/theme.service"; -import { TagModule } from 'primeng/tag'; +import { TagModule } from "primeng/tag"; import { ToolbarModule } from "primeng/toolbar"; import { ButtonModule } from "primeng/button"; import { InputSwitchModule } from "primeng/inputswitch"; - -import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe"; -import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component"; +import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; @Component({ - selector: 'app-post-details', - standalone: true, - imports: [ - DatePipe, - AsyncPipe, - RouterLink, - SidenavComponent, - FooterComponent, - FormsModule, - TagModule, - ToolbarModule, - ButtonModule, - InputSwitchModule, - SanitizerHtmlPipe, - SearchDialogComponent - ], - templateUrl: './post-details.component.html', - styleUrl: './post-details.component.scss' + selector: "app-post-details", + standalone: true, + imports: [ + DatePipe, + AsyncPipe, + RouterLink, + SidenavComponent, + FooterComponent, + FormsModule, + TagModule, + ToolbarModule, + ButtonModule, + InputSwitchModule, + SearchDialogComponent, + ], + templateUrl: "./post-details.component.html", + styleUrl: "./post-details.component.scss", }) export class PostDetailsComponent implements OnInit { - post$!: Observable; - blogInfo!: BlogInfo; - blogId: string = ""; - blogName: string = ""; - checked: boolean = true; - selectedTheme: string = "dark"; - themeService: ThemeService = inject(ThemeService); - private blogService: BlogService = inject(BlogService); + post$!: Observable; + blogInfo!: BlogInfo; + blogId: string = ""; + blogName: string = ""; + checked: boolean = true; + selectedTheme: string = "dark"; + themeService: ThemeService = inject(ThemeService); + private sanitizer: DomSanitizer = inject(DomSanitizer); + private blogService: BlogService = inject(BlogService); + + @Input({ required: true }) + set slug(slug: string) { + this.post$ = this.blogService.getSinglePost(slug); + } - @Input({required: true}) - set slug(slug: string) { - this.post$ = this.blogService.getSinglePost(slug); - } + ngOnInit(): void { + this.blogService.getBlogInfo().subscribe((data) => { + this.blogInfo = data; + this.blogId = this.blogInfo.id; + this.blogName = this.blogInfo.title; + }); + } - ngOnInit(): void { - this.blogService - .getBlogInfo() - .subscribe((data) => { - this.blogInfo = data; - this.blogId = this.blogInfo.id; - this.blogName = this.blogInfo.title; - }); - } + sanitizeHtml(html: string): SafeHtml { + return this.sanitizer.bypassSecurityTrustHtml(html); + } - onThemeChange(theme: string): void { - this.selectedTheme = theme; - this.themeService.setTheme(theme); - } + onThemeChange(theme: string): void { + this.selectedTheme = theme; + this.themeService.setTheme(theme); + } } diff --git a/angular-primeng-app/src/app/pipes/sanitizer-html.pipe.spec.ts b/angular-primeng-app/src/app/pipes/sanitizer-html.pipe.spec.ts deleted file mode 100644 index 5cb2008..0000000 --- a/angular-primeng-app/src/app/pipes/sanitizer-html.pipe.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { SanitizerHtmlPipe } from './sanitizer-html.pipe'; - -describe('SanitizerHtmlPipe', () => { - it('create an instance', () => { - const pipe = new SanitizerHtmlPipe(); - expect(pipe).toBeTruthy(); - }); -}); diff --git a/angular-primeng-app/src/app/pipes/sanitizer-html.pipe.ts b/angular-primeng-app/src/app/pipes/sanitizer-html.pipe.ts deleted file mode 100644 index 83319f2..0000000 --- a/angular-primeng-app/src/app/pipes/sanitizer-html.pipe.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { inject, Pipe, PipeTransform } from '@angular/core'; -import { DomSanitizer, SafeHtml } from "@angular/platform-browser"; - -@Pipe({ - name: 'sanitizerHtml', - standalone: true -}) -export class SanitizerHtmlPipe implements PipeTransform { - - domSanitizer = inject(DomSanitizer); - - transform(value: string): SafeHtml { - return this.domSanitizer.bypassSecurityTrustHtml(value); - } -}