Custom Ng2-smart-table

ng2-smart-table is a library for Angular that allows you to easily create and customize data tables. It provides features such as sorting, filtering, pagination, and inline editing, as well as support for custom templates and data sources.

To use ng2-smart-table in an Angular project, you will need to install it using npm or yarn:

npm install ng2-smart-table --save

Then you can import the Ng2SmartTableModule in projectlike below

import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  imports: [
    Ng2SmartTableModule
  ],
  ...
})
export class MyModule { }

Can we customize to truncate that displays a truncated version of the myText input by default, and provides a Read More or '...’ button that allows the user to toggle between the truncated version and the full version of the text.

Lets give a try

To use the custom component in the ng2-smart-table column, you need to set the type property to 'custom' and the renderComponent property to the component class. You also need to bind the component's myText input to the cell data using the [myText] attribute.

lets assume we have text Lorem ipsum dolar sit amet, consectetur adipiscing sli. Aenean euismod bibendum laoreet.Proin gravida dolar sit amet lacus accumasan et viverra justo commodo pretty long right

we know this is very long to include in a cell but we can handle its display to add read more and read less

import { Component, Input } from '@angular/core';

@Component({
  template: `
    <div class="cell-component">
      <span *ngIf="isReadMore">
        {{ myText }}
        <button (click)="toggleReadMore()">Read Less</button>
      </span>
      <span *ngIf="!isReadMore">
        {{ myText | truncate: truncateLength }}
        <button (click)="toggleReadMore()">Read More</button>
      </span>
    </div>
  `
})
export class MyCellComponent {
  @Input() myText: string;
  isReadMore = false;
  truncateLength = 50;

  toggleReadMore() {
    this.isReadMore = !this.isReadMore;
  }
}

This is an Angular component that displays a string of text, along with a “Read More” or “Read Less” button. When the component first loads, the text is truncated to a certain length (50 characters by default) and the “Read More” button is displayed. When the user clicks the “Read More” button, the full text is displayed and the button changes to “Read Less”. When the user clicks “Read Less”, the text is truncated again and the button changes back to “Read More”.

The component has an input property called “myText”, which is the text that will be displayed in the component. The component also has a boolean property called “isReadMore” that determines whether the full text or the truncated text is displayed. There is also a property called “truncateLength” that determines the length at which the text will be truncated. The component has a method called “toggleReadMore()” that is called when the user clicks the “Read More” or “Read Less” button, and it simply toggles the value of “isReadMore” between true and false.

import { Component, Input } from '@angular/core';

@Component({
  template: `
    <div class="cell-component">
      <span *ngIf="isReadMore">
        {{ myText }}
        <button (click)="toggleReadMore()">Read Less</button>
      </span>
      <span *ngIf="!isReadMore">
        {{ myText | truncate: truncateLength }}
        <button (click)="toggleReadMore()">Read More</button>
      </span>
    </div>
  `
})
export class MyCellComponent {
  @Input() myText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo';
  isReadMore = false;
  truncateLength = 50;

  toggleReadMore() {
    this.isReadMore = !this.isReadMore;
  }
}

When the component first loads, the text will be truncated to 50 characters and the Read More button will be displayed. When the user clicks the Read More button, the full text will be displayed and the button will change to Read Less

When the user clicks the Read Less button, the text will be truncated again and the button will change back to Read More