router link in posts and series

Author: esteecodes

angular-primeng-app/src/app/components/posts/posts.component.html

@@ -1,11 +1,13 @@
 <div class="posts-view">
   <div class="cards-wrapper grid">
     @for (post of posts$ | async; track post.id) {
-    <p-card class="post-card" header="{{ post.title }}" (click)="navigateToPost(post.slug)">
-      <ng-template pTemplate="header">
-        <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
-      </ng-template>
-    </p-card>
+    <a [routerLink]="['post', post.slug]">
+      <p-card class="post-card" header="{{ post.title }}">
+        <ng-template pTemplate="header">
+          <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
+        </ng-template>
+      </p-card>
+    </a>
     }
   </div>
 </div>

angular-primeng-app/src/app/components/posts/posts.component.scss

@@ -8,6 +8,10 @@
     flex-wrap: wrap;
     justify-content: center;
     margin: 2rem 1rem;
+
+    .post-card {
+      display: flex;
+    }
   }
 }
 

angular-primeng-app/src/app/components/posts/posts.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { BlogService } from '../../services/blog.service';
-import { Router } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 import { CardModule } from 'primeng/card';
@@ -9,22 +9,17 @@ import { Post } from '../../models/post';
 @Component({
   selector: 'app-posts',
   standalone: true,
-  imports: [AsyncPipe, CardModule],
+  imports: [AsyncPipe, RouterLink, CardModule],
   templateUrl: './posts.component.html',
   styleUrl: './posts.component.scss'
 })
 export class PostsComponent implements OnInit {
   blogURL!: string;
   posts$!: Observable<Post[]>;
-  private router = inject(Router);
   private blogService = inject(BlogService);
 
 	ngOnInit() {
     this.blogURL = this.blogService.getBlogURL();
 		this.posts$ = this.blogService.getPosts(this.blogURL);
 	}
-
-  navigateToPost(slug: string) {
-    this.router.navigate(['/post', slug]);
-  }
 }

angular-primeng-app/src/app/components/series/series.component.html

@@ -1,11 +1,13 @@
 <div class="series-view">
   <div class="cards-wrapper grid">
     @for (post of postsInSeries$ | async; track post.id) {
-    <p-card class="post-card" header="{{ post.title }}" (click)="navigateToPost(post.slug)">
-      <ng-template pTemplate="header">
-        <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
-      </ng-template>
-    </p-card>
+      <a [routerLink]="['/post', post.slug]">
+        <p-card class="post-card" header="{{ post.title }}">
+          <ng-template pTemplate="header">
+            <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
+          </ng-template>
+        </p-card>
+      </a>
     }
   </div>
 </div>

angular-primeng-app/src/app/components/series/series.component.scss

@@ -8,5 +8,9 @@
     flex-wrap: wrap;
     justify-content: center;
     margin: 2rem 1rem;
+
+    .post-card {
+      display: flex;
+    }
   }
 }

angular-primeng-app/src/app/components/series/series.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { ActivatedRoute, Params, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, Params, RouterLink } from '@angular/router';
 import { Observable, switchMap } from 'rxjs';
 import { Post } from '../../models/post';
 import { AsyncPipe } from "@angular/common";
@@ -18,7 +18,6 @@ export class SeriesComponent {
   slug: string = "";
   postsInSeries$!: Observable<Post[]>;
   blogService: BlogService = inject(BlogService);
-  private router = inject(Router);
 	route: ActivatedRoute = inject(ActivatedRoute);
 
   ngOnInit(): void {
@@ -30,8 +29,4 @@ export class SeriesComponent {
       })
     );
 	}
-
-  navigateToPost(slug: string) {
-    this.router.navigate(['/post', slug]);
-  }
 }

angular-primeng-app/src/styles.scss

@@ -21,7 +21,7 @@ a {
   }
 
   .p-card-title {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     line-height: 1.7rem;
     font-weight: 500;
   }