From ff265352a6f35dc745e600cd870c498990e22ef2 Mon Sep 17 00:00:00 2001 From: Dongre Jaipal Date: Wed, 20 Mar 2024 21:39:49 +0530 Subject: [PATCH 1/5] feat(component): add a new feature. For slicing the length of the string (title) to 70, created a pipe (truncate). --- .../src/app/components/posts/posts.component.html | 2 +- .../src/app/components/posts/posts.component.ts | 3 ++- .../src/app/components/series/series.component.html | 2 +- .../src/app/components/series/series.component.ts | 3 ++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/angular-primeng-app/src/app/components/posts/posts.component.html b/angular-primeng-app/src/app/components/posts/posts.component.html index cb80b9d..4010a66 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.html +++ b/angular-primeng-app/src/app/components/posts/posts.component.html @@ -2,7 +2,7 @@
@for (post of posts; track post) { - + diff --git a/angular-primeng-app/src/app/components/posts/posts.component.ts b/angular-primeng-app/src/app/components/posts/posts.component.ts index 097aeb2..bbafc28 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.ts +++ b/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' }) diff --git a/angular-primeng-app/src/app/components/series/series.component.html b/angular-primeng-app/src/app/components/series/series.component.html index 3607db7..5bcb162 100644 --- a/angular-primeng-app/src/app/components/series/series.component.html +++ b/angular-primeng-app/src/app/components/series/series.component.html @@ -3,7 +3,7 @@
@for (post of postsInSeries; track post) { - + diff --git a/angular-primeng-app/src/app/components/series/series.component.ts b/angular-primeng-app/src/app/components/series/series.component.ts index 137a460..508a158 100644 --- a/angular-primeng-app/src/app/components/series/series.component.ts +++ b/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' }) From 89b8abeb88046ad1acaf5e74dc97d4ef2527f8ba Mon Sep 17 00:00:00 2001 From: Dongre Jaipal Date: Wed, 20 Mar 2024 21:49:00 +0530 Subject: [PATCH 2/5] feat(component): add a new feature. For slicing the length of the string (title) to 70, created a pipe (truncate). --- .../app/components/posts/posts.component.html | 2 +- .../app/components/posts/posts.component.ts | 3 +-- .../components/series/series.component.html | 2 +- .../app/components/series/series.component.ts | 3 +-- .../src/app/pipes/truncate.pipe.spec.ts | 8 ++++++++ .../src/app/pipes/truncate.pipe.ts | 18 ++++++++++++++++++ 6 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts create mode 100644 angular-primeng-app/src/app/pipes/truncate.pipe.ts diff --git a/angular-primeng-app/src/app/components/posts/posts.component.html b/angular-primeng-app/src/app/components/posts/posts.component.html index 4010a66..cb80b9d 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.html +++ b/angular-primeng-app/src/app/components/posts/posts.component.html @@ -2,7 +2,7 @@
@for (post of posts; track post) { - + diff --git a/angular-primeng-app/src/app/components/posts/posts.component.ts b/angular-primeng-app/src/app/components/posts/posts.component.ts index bbafc28..097aeb2 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.ts +++ b/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' }) diff --git a/angular-primeng-app/src/app/components/series/series.component.html b/angular-primeng-app/src/app/components/series/series.component.html index 5bcb162..3607db7 100644 --- a/angular-primeng-app/src/app/components/series/series.component.html +++ b/angular-primeng-app/src/app/components/series/series.component.html @@ -3,7 +3,7 @@
@for (post of postsInSeries; track post) { - + diff --git a/angular-primeng-app/src/app/components/series/series.component.ts b/angular-primeng-app/src/app/components/series/series.component.ts index 508a158..137a460 100644 --- a/angular-primeng-app/src/app/components/series/series.component.ts +++ b/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' }) diff --git a/angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts b/angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts new file mode 100644 index 0000000..b16f3ef --- /dev/null +++ b/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(); + }); +}); diff --git a/angular-primeng-app/src/app/pipes/truncate.pipe.ts b/angular-primeng-app/src/app/pipes/truncate.pipe.ts new file mode 100644 index 0000000..6e6622a --- /dev/null +++ b/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; + } + +} From 2a292a1f01bf959cc388b799e2ae4616445528f0 Mon Sep 17 00:00:00 2001 From: Dongre Jaipal Date: Wed, 20 Mar 2024 23:22:27 +0530 Subject: [PATCH 3/5] feat(component): add a new feature. For slicing the length of the string (title) to 70, created a pipe (truncate). --- .../src/app/components/posts/posts.component.html | 2 +- .../src/app/components/posts/posts.component.ts | 4 ++-- .../src/app/components/series/series.component.html | 2 +- .../src/app/components/series/series.component.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/angular-primeng-app/src/app/components/posts/posts.component.html b/angular-primeng-app/src/app/components/posts/posts.component.html index cb80b9d..012e601 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.html +++ b/angular-primeng-app/src/app/components/posts/posts.component.html @@ -2,7 +2,7 @@
@for (post of posts; track post) { - + diff --git a/angular-primeng-app/src/app/components/posts/posts.component.ts b/angular-primeng-app/src/app/components/posts/posts.component.ts index 097aeb2..05b1026 100644 --- a/angular-primeng-app/src/app/components/posts/posts.component.ts +++ b/angular-primeng-app/src/app/components/posts/posts.component.ts @@ -1,7 +1,7 @@ import { Component, inject, OnInit } from '@angular/core'; import { BlogService } from '../../services/blog.service'; import { RouterLink } from '@angular/router'; -import { AsyncPipe } from '@angular/common'; +import { AsyncPipe, CommonModule } from '@angular/common'; import { CardModule } from 'primeng/card'; import { PageInfo, Post } from '../../models/post'; import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive"; @@ -10,7 +10,7 @@ import { ButtonModule } from "primeng/button"; @Component({ selector: 'app-posts', standalone: true, - imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule], + imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule,CommonModule], templateUrl: './posts.component.html', styleUrl: './posts.component.scss' }) diff --git a/angular-primeng-app/src/app/components/series/series.component.html b/angular-primeng-app/src/app/components/series/series.component.html index 3607db7..ba1900c 100644 --- a/angular-primeng-app/src/app/components/series/series.component.html +++ b/angular-primeng-app/src/app/components/series/series.component.html @@ -3,7 +3,7 @@
@for (post of postsInSeries; track post) { - + diff --git a/angular-primeng-app/src/app/components/series/series.component.ts b/angular-primeng-app/src/app/components/series/series.component.ts index 137a460..58384bf 100644 --- a/angular-primeng-app/src/app/components/series/series.component.ts +++ b/angular-primeng-app/src/app/components/series/series.component.ts @@ -1,7 +1,7 @@ import { Component, inject } from '@angular/core'; import { ActivatedRoute, RouterLink } from '@angular/router'; import { PageInfo, Post } from '../../models/post'; -import { AsyncPipe } from "@angular/common"; +import { AsyncPipe, CommonModule } from "@angular/common"; import { BlogService } from '../../services/blog.service'; import { CardModule } from 'primeng/card'; import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive"; @@ -10,7 +10,7 @@ import { ButtonModule } from "primeng/button"; @Component({ selector: 'app-series', standalone: true, - imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule], + imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule,CommonModule], templateUrl: './series.component.html', styleUrl: './series.component.scss' }) From c897c1b8df1b8e392f12968bf57024ef5ce9b7ff Mon Sep 17 00:00:00 2001 From: DongreJaipal <143089433+DongreJaipal@users.noreply.github.com> Date: Wed, 20 Mar 2024 23:57:29 +0530 Subject: [PATCH 4/5] Delete angular-primeng-app/src/app/pipes/truncate.pipe.ts --- .../src/app/pipes/truncate.pipe.ts | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 angular-primeng-app/src/app/pipes/truncate.pipe.ts diff --git a/angular-primeng-app/src/app/pipes/truncate.pipe.ts b/angular-primeng-app/src/app/pipes/truncate.pipe.ts deleted file mode 100644 index 6e6622a..0000000 --- a/angular-primeng-app/src/app/pipes/truncate.pipe.ts +++ /dev/null @@ -1,18 +0,0 @@ -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; - } - -} From d8c429870f49fbfcb74f9c8cc80fef967a5d3107 Mon Sep 17 00:00:00 2001 From: DongreJaipal <143089433+DongreJaipal@users.noreply.github.com> Date: Wed, 20 Mar 2024 23:58:02 +0530 Subject: [PATCH 5/5] Delete angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts --- angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts diff --git a/angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts b/angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts deleted file mode 100644 index b16f3ef..0000000 --- a/angular-primeng-app/src/app/pipes/truncate.pipe.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TruncatePipe } from './truncate.pipe'; - -describe('TruncatePipe', () => { - it('create an instance', () => { - const pipe = new TruncatePipe(); - expect(pipe).toBeTruthy(); - }); -});