
Security News
TypeScript is Porting Its Compiler to Go for 10x Faster Builds
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
ngx-nested-ellipsis
Advanced tools
Library for angular (>= 12.0.0) providing a directive to display an ellipsis if the containing text would overflow.
Supports dynamic html contents. (If you require text contents only, you might want to take a look at ngx-ellipsis, which offers better performance, but escapes any html contents to text.)
For a demo either just checkout this project and run npm install && npm run start
or visit the StackBlitz demo page.
For use in an existing angular project run npm install ngx-nested-ellipsis --save
.
Then add the installed module to your app.module.ts
:
import { NestedEllipsisModule } from 'ngx-nested-ellipsis';
// ...
@NgModule({
// ...
imports: [
// ...
NestedEllipsisModule
]
// ...
})
export class AppModule {}
If you're using the new angular standalone components/directives/pipes in your project (available since angular 16), you'll need to add NestedEllipsisModule
to each consuming components' imports instead.
Anywhere in your template:
<div style="width: 130px; height: 18px;">
<ng-template [nestedEllipsis]>Your very long <em>rich</em> text</ng-template>
</div>
As you can see, you need to define the dimensions of your element yourself. (ngx-nested-ellipsis doesn't automatically add any element styles.) But of course you don't need to use fixed widths/heights like in these examples. Flex layout shold work just fine for example.
You may add the following attributes to change the directive's behavior:
attribute | meaning |
---|---|
nestedEllipsis | required Passing true (default) will perform the directive's task otherwise the template will be rendered without truncating its contents. |
nestedEllipsisIndicator | Passing a string (default: '...') will append it when the passed template has been truncated. Passing a template will append that template instead. |
nestedEllipsisWordBoundaries | If you pass this attribute, the text won't be truncated at just any character but only at those in the attribute's value. For example nestedEllipsisWordBoundaries=" " will allow the text to break at spaces only |
nestedEllipsisMayTruncateAtFn | Function that lets you specify whether the contents may be truncated at a certain point or not. (see callback API) |
nestedEllipsisResizeDetection | How resize events should be detected - these are the possible values:
|
nestedEllipsisChange | Event emitter - Will be emitted whenever the ellipsis has been recalculated (depending on nestedEllipsisResizeDetection ). If the text had to be truncated the position of the last visible character will be emitted, else null . |
Callback function parameters:
name | type | description |
---|---|---|
node | CharacterData | Text node that is checked for truncation |
position | number | Position within that text node where the text might be truncated |
Return true
if truncating at this point in this node should be allowed.
In case you want to contribute/fork:
npm ci
./projects/ngx-nested-ellipsis/package.json
and ./README
and commit the changes to your fork.npm run build-lib
which outputs the build to ./dist/ngx-nested-ellipsis
.npm run publish-lib
.Run npm run test
to execute the unit tests via Karma.
MIT
FAQs
Nested multiline html with ellipsis for angular 16+
The npm package ngx-nested-ellipsis receives a total of 907 weekly downloads. As such, ngx-nested-ellipsis popularity was classified as not popular.
We found that ngx-nested-ellipsis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.