ang-readmore
Version:
This is a simple angular component to add "read more"/"read less" links to your long sentenses/paragraphs.
2 lines • 1.59 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ang-readmore",["exports","@angular/core","@angular/common"],t):t((e=e||self)["ang-readmore"]={},e.ng.core,e.ng.common)}(this,(function(e,t,o){"use strict";var n=function(){function e(){this.show=!0,this.showReadMore=!0,this.text="NO-TEXT",this.length=20,this.linkColor="#26A69A",this.isCollapsed=!0}return e.prototype.ngOnInit=function(){this.stringToShow=this.text,this.text.length>this.length?this.stringToShow=this.text.slice(0,this.length-1)+"...":this.showReadMore=!1,0===this.text.length&&(this.show=!1)},e.prototype.toggle=function(){this.isCollapsed=!this.isCollapsed,this.isCollapsed?this.stringToShow=this.text.slice(0,this.length-1)+"...":this.stringToShow=this.text},e.decorators=[{type:t.Component,args:[{selector:"ang-readmore",template:'\n <p *ngIf="show">\n {{ stringToShow }}\n <span *ngIf="showReadMore" (click)="toggle()" [style.color]="linkColor">{{\n isCollapsed ? "read more" : "read less"\n }}</span>\n </p>\n ',styles:["span{cursor: pointer;} p{white-space: pre-line;}"]}]}],e.propDecorators={text:[{type:t.Input}],length:[{type:t.Input}],linkColor:[{type:t.Input}]},e}();var s=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[n],imports:[o.CommonModule],exports:[n]}]}],e}();e.AngReadmoreComponent=n,e.AngReadmoreModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ang-readmore.umd.min.js.map