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 | truncate : 70}}">
+        <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>

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

@@ -6,12 +6,11 @@ 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,TruncatePipe],
+  imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule],
   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 | truncate : 70  }}">
+        <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>

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

@@ -6,12 +6,11 @@ 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,TruncatePipe],
+  imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule],
   templateUrl: './series.component.html',
   styleUrl: './series.component.scss'
 })

angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TruncatePipe } from './truncate.pipe';
+
+describe('TruncatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new TruncatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

angular-primeng-app/src/app/pipes/truncate.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate',
+  standalone: true
+})
+export class TruncatePipe implements PipeTransform {
+  isNUll: any[] = [undefined, null, ''];
+
+  transform(value: string, maxLength=70): string {
+    if (this.isNUll.includes(value))
+      return '';
+    if (value.length > maxLength)
+      return value.substring(0, (maxLength-1)).concat('...');
+    return value;
+  }
+
+}