Angular 2 Read More Directive

by

I made a version that uses character length rather than div size.

import { Component, Input, ElementRef, OnChanges} from '@angular/core';

@Component({    
    selector: 'read-more',
    template: `
        <div [innerHTML]="currentText">
        </div>
            <a [class.hidden]="hideToggle" (click)="toggleView()">Read {{isCollapsed? 'more':'less'}}</a>
    `
})

export class ReadMoreComponent implements OnChanges {
    @Input() text: string;
    @Input() maxLength: number = 100;
    currentText: string;
    hideToggle: boolean = true;

    public isCollapsed: boolean = true;

    constructor(private elementRef: ElementRef) {

    }
    toggleView() {
        this.isCollapsed = !this.isCollapsed;
        this.determineView();
    }
    determineView() {
        if (!this.text || this.text.length <= this.maxLength) {
            this.currentText = this.text;
            this.isCollapsed = false;
            this.hideToggle = true;
            return;
        }
        this.hideToggle = false;
        if (this.isCollapsed == true) {
            this.currentText = this.text.substring(0, this.maxLength) + "...";
        } else if(this.isCollapsed == false)  {
            this.currentText = this.text;
        }

    }
    ngOnChanges() {
        this.determineView();       
    }
}

Usage: 

<read-more [text]="text" [maxLength]="100"></read-more>

More Related Contents:

  1. Angular 2 Scroll to top on Route Change
  2. NgFor doesn’t update data with Pipe in Angular2
  3. How to dynamically add a directive?
  4. When to use square brackets [ ] in directives @Inputs and when not?
  5. vs
  6. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  7. Angular 2 input parameters on root directive [duplicate]
  8. How to detect scroll to bottom of html element
  9. Angular 2 disable sanitize
  10. Dynamically add event listener
  11. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  12. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  13. Angular: Cannot find a differ supporting object ‘[object Object]’
  14. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  15. Angular and Typescript: Can’t find names – Error: cannot find name
  16. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  17. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  18. How to inject service into class (not component)
  19. Emit event from parent to child
  20. How to make directives and components available globally
  21. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  22. Angular 2 Basic Authentication not working
  23. Property ‘json’ does not exist on type ‘Object’
  24. Update parent component property from child component in Angular 2
  25. How to use variable to define templateUrl in Angular2
  26. Behaviour subject initial value null?
  27. Property ‘toPromise’ does not exist on type ‘Observable’
  28. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  29. Page transition animations with Angular 2.0 router and component interface promises
  30. Angular load external configuration before AppModule loads

Leave a Comment