ngx-cut
v2.3.1
Published
Angular directives for cutting texts
Downloads
609
Maintainers
Readme
Angular directive for cutting texts with responsive options
✓ Angular 18 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 yourimports
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
]
})
🚀 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. |
🔧 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
|
📦 Dependencies
None
🪪 License
Copyright © 2020 - 2024 Dominik Hladik
All contents are licensed under the MIT license.