Summary Pipe

ng g p summary --skip-import

Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'summary',
  standalone: true,
})
export class SummaryPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) {
      return value; // If the input is empty, return it as is
    }

    if (value.length <= 60) {
      return value; // If the input is already 30 characters or less, return it as is
    }

    return value.substring(0, 60) + '...'; // Return the substring of the input with ellipsis
  }
}

Component

import { Component } from '@angular/core';
import { SummaryPipe } from 'src/app/pipes/summary.pipe';

@Component({
  standalone: true,
  imports: [SummaryPipe],
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styleUrls: ['./pipe.component.scss'],
})
export class PipeComponent {
  text =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ante auctor, ' +
    'dictum massa in, consectetur massa. Nam est lorem, elementum a blandit id, sagittis ' +
    'eget ante. Sed tempus mauris a massa blandit, id vehicula nibh lobortis. Fusce in ' +
    'accumsan dui. Pellentesque sit amet mi ut lectus sodales lobortis. Nulla lacinia ' +
    'rhoncus egestas. Nam fermentum metus est, at placerat dolor tempus in. ';

}

<p>{{ text | summary }}</p>