Ngx-cut NPM | npm.io

Angular directive for cutting texts with responsive options
✓ Angular 17 compatible

Here's the demo or stackblitz live preview or codesandbox live preview

Lightweight
No dependencies!
Directive way
Highly customizable options...
Responsivity supported
Predefined breakpoints (Bootrstrap, CDK, FxLayout, Tailwind)

Install

Use yarn (or npm) to install the package

yarn add ngx-cut

Add NgxCutModule into your imports

  export const appConfig: ApplicationConfig = {
    providers: [
      importProvidersFrom(
        BrowserModule,
        NgxCutModule.forRoot({
          size: 1,
          breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },
          responsiveSizes: {
            xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
            sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
            md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
            lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
            xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
          }
        })
      )
    ]
  };

  // or

  import { NgxCutModule } from 'ngx-cut';

  @NgModule({
   // ...
   imports: [
     // ...
     NgxCutModule.forRoot({
       // directive without [size] uses this value
       size: 1,
       // custom breakpoints
       breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },
       // lines be truncated in responsive mode
       responsiveSizes: {
         xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
         sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
         md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
         lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
         xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
       }
     })
   ]
  })

  // or

  @NgModule({
   // ...
   imports: [
     // ...
     NgxCutModule.forRoot({
       // directive without [size] uses responsiveSizes.sm
       size: 'sm',
       // predefined breakpoint ('BOOTSTRAP', 'FX_LAYOUT' or 'CDK')
       breakpoints: 'BOOTSTRAP',
       // lines be truncated in responsive mode
       responsiveSizes: {
         xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },
         sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },
         md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },
         lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },
         xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }
       }
     })
   ]
  })

  // or

  @NgModule({
   // ...
   imports: [
     // ...
     NgxCutModule
   ]
  })

Compatibility

Angular	ngx-cut	Install
>= 12	2.x	`yarn add ngx-cut`
>= 5 < 13	1.x	`yarn add ngx-cut@1`
>= 5 < 13	0.x	`yarn add ngx-cut@0`

Quick start

Example code

<p ngxCut>some long text</p>

Result

  some long...

Options

Root options

Option	Type	Default	Description
size	string or number	1	Number of truncated lines
breakpoints	object	DEFAULT_BREAKPOINTS	Breakpoints used in responsive mode
responsiveSizes	object	DEFAULT_RESPONSIVE_SIZES	How many lines should be truncated for each breakpoint

Directive

Option	Type	Default	Description
size	object	value taken from root options	Number of truncated lines or responsive mode
truncateDisabled	boolean	false	Whether truncation is active or not
(truncateChange)	() => object	none	Event called when truncation is changed.