feat(component): add a new feature. For slicing the length of the string (title) to 70, created a pipe (truncate).

Author: DongreJaipal

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

@@ -2,7 +2,7 @@
   <div class="cards-wrapper grid">
     @for (post of posts; track post) {
       <a [routerLink]="['post', post.slug]">
-        <p-card class="post-card" header="{{ post.title }}">
+        <p-card class="post-card" header="{{ post.title | truncate : 70}}">
           <ng-template pTemplate="header">
             <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'"/>
           </ng-template>

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

@@ -6,11 +6,12 @@ import { CardModule } from 'primeng/card';
 import { PageInfo, Post } from '../../models/post';
 import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive";
 import { ButtonModule } from "primeng/button";
+import { TruncatePipe } from '../../pipes/truncate.pipe';
 
 @Component({
   selector: 'app-posts',
   standalone: true,
-  imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule],
+  imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule,TruncatePipe],
   templateUrl: './posts.component.html',
   styleUrl: './posts.component.scss'
 })

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

@@ -3,7 +3,7 @@
   <div class="cards-wrapper grid">
     @for (post of postsInSeries; track post) {
       <a [routerLink]="['/post', post.slug]">
-        <p-card class="post-card" header="{{ post.title }}">
+        <p-card class="post-card" header="{{ post.title | truncate : 70  }}">
           <ng-template pTemplate="header">
             <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
           </ng-template>

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

@@ -6,11 +6,12 @@ import { BlogService } from '../../services/blog.service';
 import { CardModule } from 'primeng/card';
 import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive";
 import { ButtonModule } from "primeng/button";
+import { TruncatePipe } from '../../pipes/truncate.pipe';
 
 @Component({
   selector: 'app-series',
   standalone: true,
-  imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule],
+  imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule,TruncatePipe],
   templateUrl: './series.component.html',
   styleUrl: './series.component.scss'
 })