{"id":20538304,"url":"https://github.com/celtian/ngx-cut","last_synced_at":"2025-04-14T07:50:33.196Z","repository":{"id":40310531,"uuid":"266186608","full_name":"Celtian/ngx-cut","owner":"Celtian","description":"Angular directive for cutting texts with responsive options","archived":false,"fork":false,"pushed_at":"2025-02-15T22:43:11.000Z","size":3789,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T01:41:49.613Z","etag":null,"topics":["angular","library"],"latest_commit_sha":null,"homepage":"https://celtian.github.io/ngx-cut","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Celtian.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-22T19:00:49.000Z","updated_at":"2025-03-12T14:08:42.000Z","dependencies_parsed_at":"2024-09-18T16:34:20.686Z","dependency_job_id":"fada5d9c-0f83-413c-92db-cd1ab0964b13","html_url":"https://github.com/Celtian/ngx-cut","commit_stats":{"total_commits":194,"total_committers":4,"mean_commits":48.5,"dds":"0.17525773195876293","last_synced_commit":"d3f83e552677d7e4890da88dece9cf556b41cd5f"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-cut","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-cut/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-cut/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-cut/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Celtian","download_url":"https://codeload.github.com/Celtian/ngx-cut/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248844032,"owners_count":21170486,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","library"],"created_at":"2024-11-16T00:46:14.952Z","updated_at":"2025-04-14T07:50:33.179Z","avatar_url":"https://github.com/Celtian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Celtian/ngx-cut\" target=\"blank\"\u003e\u003cimg src=\"assets/logo.svg?sanitize=true\" alt=\"\" width=\"120\"\u003e\u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eNgxCut\u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-cut.svg)](https://badge.fury.io/js/ngx-cut)\n[![Package License](https://img.shields.io/npm/l/ngx-cut.svg)](https://www.npmjs.com/ngx-cut)\n[![NPM Downloads](https://img.shields.io/npm/dm/ngx-cut.svg)](https://www.npmjs.com/ngx-cut)\n[![Build \u0026 Publish](https://github.com/celtian/ngx-cut/workflows/Build%20\u0026%20Publish/badge.svg)](https://github.com/celtian/ngx-cut/actions)\n[![Snyk](https://snyk.io/advisor/npm-package/ngx-cut/badge.svg)](https://snyk.io/advisor/npm-package/ngx-cut)\n[![codecov](https://codecov.io/gh/Celtian/ngx-cut/branch/master/graph/badge.svg?token=1IRUKIKM0D)](https://codecov.io/gh/celtian/ngx-cut/)\n[![stars](https://badgen.net/github/stars/celtian/ngx-cut)](https://github.com/celtian/ngx-cut/)\n[![forks](https://badgen.net/github/forks/celtian/ngx-cut)](https://github.com/celtian/ngx-cut/)\n[![HitCount](http://hits.dwyl.com/celtian/ngx-cut.svg)](http://hits.dwyl.com/celtian/ngx-cut)\n\n\u003e Angular directive for cutting texts with responsive options\n\n\u003e ✓ _Angular 19 compatible_\n\nHere's the [demo](http://celtian.github.io/ngx-cut/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-cut) or [codesandbox live preview](https://codesandbox.io/s/ngx-cut-j2ryu)\n\n- Lightweight\n- No dependencies!\n- Directive way\n- Highly customizable [options](#options)...\n- Responsivity supported\n- Predefined breakpoints (Bootrstrap, CDK, FxLayout, Tailwind)\n\n## 🛠️ Install\n\n1. Use yarn (or npm) to install the package\n\n```terminal\nyarn add ngx-cut\n```\n\n2. Add `NgxCutModule` into your `imports`\n\n```typescript\n\n  export const appConfig: ApplicationConfig = {\n    providers: [\n      importProvidersFrom(\n        BrowserModule,\n        NgxCutModule.forRoot({\n          size: 1,\n          breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },\n          responsiveSizes: {\n            xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },\n            sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },\n            md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },\n            lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },\n            xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }\n          }\n        })\n      )\n    ]\n  };\n\n  // or\n\n  import { NgxCutModule } from 'ngx-cut';\n\n  @NgModule({\n   // ...\n   imports: [\n     // ...\n     NgxCutModule.forRoot({\n       // directive without [size] uses this value\n       size: 1,\n       // custom breakpoints\n       breakpoints: { sm: 300, md: 400, lg: 500, xl: 600 },\n       // lines be truncated in responsive mode\n       responsiveSizes: {\n         xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },\n         sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },\n         md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },\n         lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },\n         xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }\n       }\n     })\n   ]\n  })\n\n  // or\n\n  @NgModule({\n   // ...\n   imports: [\n     // ...\n     NgxCutModule.forRoot({\n       // directive without [size] uses responsiveSizes.sm\n       size: 'sm',\n       // predefined breakpoint ('BOOTSTRAP', 'FX_LAYOUT' or 'CDK')\n       breakpoints: 'BOOTSTRAP',\n       // lines be truncated in responsive mode\n       responsiveSizes: {\n         xs: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 },\n         sm: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6 },\n         md: { xs: 3, sm: 4, md: 5, lg: 6, xl: 7 },\n         lg: { xs: 4, sm: 5, md: 6, lg: 7, xl: 8 },\n         xl: { xs: 5, sm: 6, md: 7, lg: 8, xl: 9 }\n       }\n     })\n   ]\n  })\n\n  // or\n\n  @NgModule({\n   // ...\n   imports: [\n     // ...\n     NgxCutModule\n   ]\n  })\n```\n\n## 🚀 Quick start\n\n### Example code\n\n```html\n\u003cp ngxCut\u003esome long text\u003c/p\u003e\n```\n\n### Result\n\n```code\n  some long...\n```\n\n## 🛠️ Options\n\n### Root options\n\n| Option              | Type             | Default                  | Description                                            |\n| ------------------- | ---------------- | ------------------------ | ------------------------------------------------------ |\n| **size**            | string or number | 1                        | Number of truncated lines                              |\n| **breakpoints**     | object           | DEFAULT_BREAKPOINTS      | Breakpoints used in responsive mode                    |\n| **responsiveSizes** | object           | DEFAULT_RESPONSIVE_SIZES | How many lines should be truncated for each breakpoint |\n\n### Directive\n\n| Option                 | Type         | Default                       | Description                                  |\n| ---------------------- | ------------ | ----------------------------- | -------------------------------------------- |\n| **[size]**             | object       | value taken from root options | Number of truncated lines or responsive mode |\n| **[truncateDisabled]** | boolean      | false                         | Whether truncation is active or not          |\n| **(truncateChange)**   | () =\u003e object | none                          | Event called when truncation is changed.     |\n\n## 🔧 Compatibility\n\n| Angular   | ngx-cut | Install              |\n| --------- | ------- | -------------------- |\n| \u003e= 12     | 2.x     | `yarn add ngx-cut`   |\n| \u003e= 5 \u003c 13 | 1.x     | `yarn add ngx-cut@1` |\n| \u003e= 5 \u003c 13 | 0.x     | `yarn add ngx-cut@0` |\n\n## 📦 Dependencies\n\n_None_\n\n## 🪪 License\n\nCopyright \u0026copy; 2020 - 2025 [Dominik Hladik](https://github.com/Celtian)\n\nAll contents are licensed under the [MIT license].\n\n[mit license]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceltian%2Fngx-cut","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceltian%2Fngx-cut","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceltian%2Fngx-cut/lists"}