Closed quetzalcoatl closed 5 years ago
Fix is probably as simple as changing:
@Directive({
selector: '[ellipsis]'
})
to
@Directive({
selector: '[ellipsis]',
exportAs: 'ngxEllipsis' // or just ellipsis, or whatever name you would like to have there
})
in /src/lib/directives/ellipsis.directive.ts
@quetzalcoatl I added support for that in ngx-ellipsis@2.0.4
just as you requested.
However a fair warning - I hadn't planned for the API to be publicly accessed so far (though it does make sense, I agree). The only things I tested so far:
// applying the ellipsis manually
// (you probably want to use the brand new ellipsis-resize-detection="manual"
// option with that - see README):
this.ell.applyEllipsis();
// changing the content would also work, but you'd
// have to call ngOnChanges manually, so I accually recommend to
// stick with using the input instead. (I know, I could
// transform ellipsisContent into a setter, but I don't want to risk that change right now):
this.ell.ellipsisContent = 'new content';
this.ell.ngOnChanges();
What were you trying to accomplish by accessing the directive directly?
Hello! Thank you for looking into this!
What were you trying to accomplish by accessing the directive directly?
Actually, a very simple thing. Two actually.
1) I wanted to get the original, untrimmed text
I use [ellipsis-content]
with some more or less complex expressions, totally view-related, and I wanted to follow single-definition-rule and have them stated in one place only.
Instead of writing:
<tag ellipsis [ellipsis-content]="(some long expr || other || ...)" (click)="handler(1,2,(some long expr || other || ...))">
I thought of writing it as:
<tag ellipsis #e="?ellipsis?" [ellipsis-content]="(some long expr || other || ...)" (click)="handler(1,2,e.ellipsisContent)"
and of course the ?ellipsis?
depends on exportAs
.
2) I wanted to detect when the text ellipsis is active
That's another topic, it's easy to check when I have the original text at hand, I can just compare it with the possibly-truncated output. However, it'd be great if the directive could be somehow queried for that.
1+2 are needed to show .. tooltips. I have a requirement for my system, that when a text overflows and is trimmed, it should show "..." and then when the text is hovered-upon, a tooltip with full text should show up. As odd/dangerous it sounds (show all works of the Shakespeare as a tooltip..), well.. sometimes disputing the requirements is not possible.
I've just tried using a typical binding:
and got following error in the result:
Please consider adding this attribute to the ellipsis directive, or else its users will not be able to bind names to it via standard angular name binding: