ang-readmore/fesm2015/ang-readmore.js

This is a simple angular component to add "read more"/"read less" links to your long sentenses/paragraphs.

import { Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ang-readmore.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AngReadmoreComponent {
    constructor() {
        this.show = true;
        this.showReadMore = true;
        this.text = "NO-TEXT";
        this.length = 20;
        this.linkColor = "#26A69A";
        this.isCollapsed = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.stringToShow = this.text;
        if (this.text.length > this.length) {
            this.stringToShow = this.text.slice(0, this.length - 1) + "...";
        }
        else {
            this.showReadMore = false;
        }
        if (this.text.length === 0) {
            this.show = false;
        }
    }
    /**
     * @return {?}
     */
    toggle() {
        this.isCollapsed = !this.isCollapsed;
        if (this.isCollapsed) {
            this.stringToShow = this.text.slice(0, this.length - 1) + "...";
        }
        else {
            this.stringToShow = this.text;
        }
    }
}
AngReadmoreComponent.decorators = [
    { type: Component, args: [{
                selector: "ang-readmore",
                template: `
    <p *ngIf="show">
      {{ stringToShow }}
      <span *ngIf="showReadMore" (click)="toggle()" [style.color]="linkColor">{{
        isCollapsed ? "read more" : "read less"
      }}</span>
    </p>
  `,
                styles: ["span{cursor: pointer;} p{white-space: pre-line;}"]
            }] }
];
AngReadmoreComponent.propDecorators = {
    text: [{ type: Input }],
    length: [{ type: Input }],
    linkColor: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    AngReadmoreComponent.prototype.show;
    /** @type {?} */
    AngReadmoreComponent.prototype.showReadMore;
    /** @type {?} */
    AngReadmoreComponent.prototype.stringToShow;
    /** @type {?} */
    AngReadmoreComponent.prototype.text;
    /** @type {?} */
    AngReadmoreComponent.prototype.length;
    /** @type {?} */
    AngReadmoreComponent.prototype.linkColor;
    /** @type {?} */
    AngReadmoreComponent.prototype.isCollapsed;
}

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ang-readmore.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AngReadmoreModule {
}
AngReadmoreModule.decorators = [
    { type: NgModule, args: [{
                declarations: [AngReadmoreComponent],
                imports: [CommonModule],
                exports: [AngReadmoreComponent],
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: public-api.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * Generated from: ang-readmore.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { AngReadmoreComponent, AngReadmoreModule };
//# sourceMappingURL=ang-readmore.js.map