search

lentschi / ngx-ellipsis

Multiline text with ellipsis for angular 9+
MIT License
96 stars 22 forks source link

Click more handler #48

Closed nickysaido closed 3 years ago

nickysaido commented 3 years ago

Hi. I use this module in angular. Dynamically generate multiple components with a lot of text. And to each, I connect an event handler <div class="review-text" ellipsis="... {{showMoreTitle}}" [ellipsis-content]="review.text" (ellipsis-click-more)="showMoreClick()"></div> but my handler doesn't work. Due to the fact that angular adds its own classes to the anchor element: <a _ngcontent-my-app-id-c22="" class="ngx-ellipsis-more ng-tns-c22-3" href="#">... more text</a> Could you make adjustments to the ngx-ellipsis/src/lib/directives/ellipsis.directive file.ts in line 411. Do something like: if (!e.target || !(<HTMLElement> e.target).className || !(<HTMLElement> e.target).classList.contains('ngx-ellipsis-more')) { return; }

Thanks.

lentschi commented 3 years ago

Hi @nickysaido, I adapted the line as you wished in ngx-ellipsis@3.0.1 (By now all major browsers support classList, so it's just more clear this way.)

However, I couldn't reproduce your bug even before fixing it: For me angular itself never adds these pseudo classes. (And I think it shouldn't ever as this is an element that's manually added by this.renderer.appendChild. It appears ng-tns-* are classes added by angular material - so apparently that does some magic I wasn't aware of... :thinking: )

nickysaido commented 3 years ago

Thanks for your update. I think it's classes adding by angular animation effects.