3

I have created custome summary pipe class it works fine but I want to add a read more link end of substring.. when clicked all content shown.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'summary' })
export class SummaryPipe implements PipeTransform {
    transform(value: string, maxWords: number) {
        if (value)
            return value.substring(0, maxWords) +"... <a href='#' (click)='getAllText()'>Read more</a>";
    }
       getAllText() {
        //return this.value; ?
    }
}

I need to fill fucn I know but I need to ask what is more efficient and true way of accomplish this?

adeveloper
  • 311
  • 1
  • 4
  • 14

1 Answers1

6

A best practice would probably be to separate the pipe logic from the 'read more' button.

Also, I would suggest you to use shorten pipe from ng-pipes module: https://github.com/danrevah/ng-pipes#shorten

Example of usage:

In the controller:

this.longStr = 'Some long string here';
this.maxLength = 3
this.showAll = () => this.maxLength = this.longStr.length;

In the view:

<p>{{longStr | shorten: maxLength: '...'}}</p>
<div *ngIf="longStr.length > maxLength" (click)="showAll()">Read More</div>
D_R
  • 4,894
  • 4
  • 45
  • 62
  • 1
    i tried this, it works fine for the single post, but it is not working for multiple posts on a single page. I click on READ MORE and all other posts are also affected. How can I achieve this only to the single post which I select to read more – shahakshay94 May 29 '17 at 10:34