Multiple ways to truncate string typescript of Angular

Multiple ways to truncate string typescript of Angular

Sometimes, Long content string text needs to be truncated with limited characters and displayed in the Angular application.

There are multiple ways we can do

  • Angular slice pipe to truncate string content
  • Adding an ellipse and truncating a string.

Angular truncates a string to limit characters

This example does limit the number of characters to display on UI.

Typescript component: Declared a variable content that holds long content:

import { Component, OnInit } from "@angular/core";
import { DecimalPipe } from "@angular/common";

@Component({
  selector: "app-component",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  constructor() {}
  content: string = "long form of text display";
  ngOnInit(): void {}
}

Angular provides an inbuilt slice pipe🔗

It creates a subpart of an array of strings.

It takes the start and end parameters.

{{expression|slice :start[:end]}}

expression is a variable or angular javascript expression. the start is an index starting position. the end is an end index starting position. for a string to truncate to 10 characters.

{{variable|slice: 0,10 }}

Here is an Angular HTML component.

<p>Angular truncate text example</p>
<div>{{content| slice:0:10}}</div>

If you want to add an ellipse or some string after truncating the string content.

Here is a component example

<p>Angular truncate text & add some string example</p>
<div>{{ (content.length>10)? (content | slice:0:10)+'>>>':(content) }}</div>

Angular CSS component to limit the long text and add ellipse end

We can also limit the long text using CSS in the Angular component

Here is an example

<div class="text">
This is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long text.</span>
</div>

Here is a CSS code

.text {
  display: -webkit-box;
  max-width: 300px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}