0.0.11 • Published 3 years ago
@minni/read-more v0.0.11
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
}
}