В Angular 6 реализация ограничения количества символов с помощью многоточия (…) может значительно улучшить взаимодействие с пользователем, предоставляя краткое и визуально привлекательное представление усеченного текста. В этой статье мы рассмотрим несколько методов достижения этой функциональности, сопровождаемые примерами кода.

Метод 1: переполнение текста CSS
Один из самых простых способов ограничить количество символов и отобразить многоточие — использовать CSS. Примените следующие стили к элементу, содержащему текст:

.text-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Метод 2: преобразование каналов
Каналы Angular — мощные инструменты для преобразования данных. Мы можем создать собственный канал, чтобы ограничить количество символов и добавить многоточие. Вот пример:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'charLimit'
})
export class CharLimitPipe implements PipeTransform {
  transform(value: string, limit: number): string {
    if (value.length <= limit) {
      return value;
    } else {
      return value.slice(0, limit) + '...';
    }
  }
}

Чтобы использовать канал в шаблоне вашего компонента, вы можете сделать следующее:

<p>{{ text | charLimit: 50 }}</p>

Метод 3: пользовательская директива
Другой подход заключается в создании пользовательской директивы, которая усекает текст и добавляет многоточие. Вот пример реализации:

import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
  selector: '[charLimit]'
})
export class CharLimitDirective implements OnInit {
  constructor(private elementRef: ElementRef) {}
  ngOnInit() {
    const element = this.elementRef.nativeElement;
    const limit = 50;
    if (element.textContent.length > limit) {
      element.textContent = element.textContent.slice(0, limit) + '...';
    }
  }
}

Чтобы применить директиву к элементу, добавьте атрибут charLimit:

<p charLimit>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>