ngx-cut

Angular directives for cutting texts

Usage no npm install needed!

<script type="module">
  import ngxCut from 'https://cdn.skypack.dev/ngx-cut';
</script>

README

NgxCut

npm version Package License NPM Downloads Build & Publish codecov stars forks HitCount

Angular directive for cutting texts with responsive options

Angular 13, Ivy and SSR 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

  1. Use yarn (or npm) to install the package
yarn add ngx-cut
  1. Add NgxCutModule into your module imports
  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.

Dependencies

None

License

Copyright © 2020 - 2022 Dominik Hladik

All contents are licensed under the MIT license.