ngxs-read-more

This is a simple angular library that truncates the text based on the input

Quick Start

• Install using npm:

npm i @minni/read-more --force

• Import the module

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxsReadMoreModule } from '@minni/read-more'; --> Imported module
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxsReadMoreModule], --> Add the modules in imports
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {

}

• Use readMore directive in the component with number of truncated line limit.

//app.component.html
<p readMore="3">
  Blog ennui paleo tumblr man braid shaman wolf echo park tote bag umami.
  Portland shabby chic church-key af. Trust fund 90's schlitz adaptogen
  post-ironic sartorial glossier knausgaard thundercats YOLO small batch
  distillery brunch etsy gentrify. Echo park freegan tumblr kinfolk cray tofu
  VHS pok pok vinyl iceland meggings. Drinking vinegar direct trade tofu,
  pinterest mlkshk semiotics lumbersexua
</p>

• Add extra options to the library by using the readMoreOptions input decorator

//app.component.html
<p readMore="3" [readMoreOptions]="readMoreOption">
  Blog ennui paleo tumblr man braid shaman wolf echo park tote bag umami.
  Portland shabby chic church-key af. Trust fund 90's schlitz adaptogen
  post-ironic sartorial glossier knausgaard thundercats YOLO small batch
  distillery brunch etsy gentrify. Echo park freegan tumblr kinfolk cray tofu
  VHS pok pok vinyl iceland meggings. Drinking vinegar direct trade tofu,
  pinterest mlkshk semiotics lumbersexua
</p>

//app.component.ts
export class AppComponent {
  readMoreOption: ReadMoreOptions = {
    readLessText: 'less', --> Display text for read-less
    readMoreText: 'more', --> Display text for read-more
    styles: {             --> Custom styles to be added for the read-more action button
      color: "#666",
    },
    classes: ['custom-style', 'blog-style'] --> class to be added to the read-more button
  }
}