ngx-truncate-text v3.0.0

ngx-truncate-text

This module is for shortening the text and also includes some useful features for text manipulation.

see demo on stackblitz. in developing ...

install:

npm i ngx-truncate-text

then import it to app.module.ts.

import {NgxTruncateTextModule } from '@exir/ngx-truncate-text';

@NgModule({
declarations: [...],
imports: [
...
NgxTruncateTextModule
],
providers: [...],
bootstrap: [...]
})
export class AppModule { }

and then use it in html (simplest use) :

<p ngxTruncateText number="50" more="show" less="hide">
	John Griffith London (1876 – 1916) was an American novelist, journalist, and social activist. A pioneer of commercial fiction and American magazines.
</p>

• default color for toggle button is #ff00ff and cursor style is pointer , if you want to use custom style, use the builtin .toggleText class.

.toggleText{
    color: aqua !important;
	font-size:14px;
	font-style: italic;
}

• default color for hashtags is #1b95e0 (from twitter), if you want to use custom style, use the builtin .hashtag class.
• befor sending highlightList to directive, you must stringify it. in ts:

 q = [
    { name: 'juven', color: 'lightgreen' },
    { name: 'istia', color: 'pink' },
    { name: 'Cristiano', color: 'orange' },
    { name: 'neymar', color: 'lightblue' },
    { name: 'Brazil', color: 'yellow' }
  ];

  queryHighlight =  JSON.stringify(this.q);

in html:

 <p ngxTruncateText  number="70" more="more" less="less"
        ...
        [highlightList]="queryHighlight">
        {{news}}
 </p>

• for find and highlight exactly the word use the [highlightCondition]="exactly". Without this condition, similar words will be highlighted.

 <p ngxTruncateText  number="70" more="more" less="less"
        ...
        [highlightCondition]="exactly" [highlightList]="queryHighlight">
        {{news}}
 </p>

• you can send the highlight list as array of string, the list is colored with yellow (default color).

   q3 = ["aiming","france","ran"];
   queryHighlight =  JSON.stringify(this.q3);