// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    if (value.length <= limit) return value;
    return value.slice(0, limit) + '…';
  }
}

// article.component.ts
import { Component } from '@angular/core';
import { TruncatePipe } from './truncate.pipe';

@Component({
  selector: 'app-article',
  standalone: true,
  imports: [TruncatePipe],
  template: `
    <p>{{ body | truncate:50 }}</p>
  `,
})
export class ArticleComponent {
  body =
    'Angular pipes transform a value purely for display, leaving the original underlying data completely untouched.';
}

/*
  Notes:
  - transform(value, limit = 20) gives the pipe a default limit, so
    {{ body | truncate }} (no argument) would use 20; here truncate:50
    passes 50 explicitly as the limit.
  - The pipe is standalone, so it's imported into the component's
    imports array exactly like a standalone component.
*/