Angular 2 Read More Directive

Question

I need to build a readmore directive in Angular2. What this directive will do is for collapse and expand long blocks of text with "Read more" and "Close" links. Not on the basis of the character count but on the basis of the specified max height.

<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>

Can anyone please guide what would be the most reliable way to get/set the height of the element for this specific case.

Any guidelines on how this specific directive could be implemented would also be highly appreciated.

I need to build something like this https://github.com/jedfoster/Readmore.js

Solution:

With the help from Andzhik I am able to build the below component that meets my requirements.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
 selector: 'read-more',
 template: `
 <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
 </div>
 <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
 `,
 styles: [`
 div.collapsed {
 overflow: hidden;
 }
 `]
})
export class ReadMoreComponent implements AfterViewInit {
 //the text that need to be put in the container
 @Input() text: string;
 //maximum height of the container
 @Input() maxHeight: number = 100;
 //set these to false to get the height of the expended container 
 public isCollapsed: boolean = false;
 public isCollapsable: boolean = false;
 constructor(private elementRef: ElementRef) {
 }
 ngAfterViewInit() {
 let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
 //collapsable only if the contents make container exceed the max height
 if (currentHeight > this.maxHeight) {
 this.isCollapsed = true;
 this.isCollapsable = true;
 }
 }
}

Usage:

<read-more [text]="details" [maxHeight]="250"></read-more>

If there could be any improvements, please feel free to suggest.

• chenk: Find currentHeight inside the setTimeout(_ => { ..... }) would eliminate some window resizing issue while angular running change detections. see stackoverflow.com/questions/38930183/…

Answer 1

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>

• Naveed Ahmed: What about contents with html tags?
• jugg1es: i think it should work with html. It's using [innerHTML] directive
• Yasir: @jugg1es hi, the button read less still appear when word count is less than 100.. also can we have animation for expand and collapse ! how to do that
• jugg1es: @DavidBracoly stackoverflow is meant to answer questions, not respond to feature requests like github. If you want to add those features, it really shouldn't be that hard to implement the changes you want. That said, if you want those features added, ill give you my paypal account and you can forward me 200ドル and I'll see what I can do :)
• BEJGAM SHIVA PRASAD: Small Change in template... add *ngIf to anchor...*ngIf="text.length >= this.maxLength"

Answer 2

I think you'll need a Component rather then Directive. Components makes more sense since you need to add Read more button/link, i.e. update DOM.

@Component({
 selector: 'read-more',
 template: `
 <div [class.collapsed]="isCollapsed">
 <ng-content></ng-content>
 </div>
 <div (click)="isCollapsed = !isCollapsed">Read more</div>
 `,
 styles: [`
 div.collapsed {
 height: 250px;
 overflow: hidden;
 }
 `]
})
export class ReadMoreComponent {
 isCollapsed = true;
}

Usage:

<read-more>
 <!-- you HTML goes here -->
</read-more>

• Naveed Ahmed: Thank you so much Andzhik for your reply. I made some changes to the component: template : ` <div [innerHTML]="text" [class.collapsed]="isCollapsed"> </div> <div (click)="isCollapsed =! isCollapsed">Read more</div> ` styles: [` div.collapsed { height: 150px; overflow: hidden; } `] I also added @Input() text: string; but I still need a way to get the height of the div containing text so that on the basis of which I can decide whether to show or hide Read more link.
• Andrei Zhytkevich: You can use ElementRef ngcourse.rangle.io/handout/advanced-components/elementref.html to access directly DOM element representing your Component. PS: if you are satisfied with my original answer, please accept it, thanks.
• Naveed Ahmed: I tried that but when I log on console in constructor or in ngAfterContentChecked it returns undefined console.log(this.el.nativeElement.height); I also tried @HostBinding('style.height') private height: string; but its also undefined.
• Andrei Zhytkevich: Looks like the better lifecycle hook will ngAfterViewInit and you need to get this.el.nativeElement.offsetHeight instead of ...height. height is a member of `this.el.nativeElement.style' and has no value at that point.
• Naveed Ahmed: Thank you so much Andzhik you were very helpful, I have posted my final read more component below, please suggest if there can be any improvements.

Answer 3

With the help from Andzhik I am able to build the below component that meets my requirements.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
 selector: 'read-more',
 template: `
 <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
 </div>
 <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
 `,
 styles: [`
 div.collapsed {
 overflow: hidden;
 }
 `]
})
export class ReadMoreComponent implements AfterViewInit {
 //the text that need to be put in the container
 @Input() text: string;
 //maximum height of the container
 @Input() maxHeight: number = 100;
 //set these to false to get the height of the expended container 
 public isCollapsed: boolean = false;
 public isCollapsable: boolean = false;
 constructor(private elementRef: ElementRef) {
 }
 ngAfterViewInit() {
 let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
 //collapsable only if the contents make container exceed the max height
 if (currentHeight > this.maxHeight) {
 this.isCollapsed = true;
 this.isCollapsable = true;
 }
 }
}

Usage:

<read-more [text]="details" [maxHeight]="250"></read-more>

Answer 4

import { Component, Input,OnChanges} from '@angular/core';
@Component({ 
 selector: 'read-more',
 template: `
 <div [innerHTML]="currentText"></div>
 <span *ngIf="showToggleButton">
 <a (click)="toggleView()">Read {{isCollapsed? 'more':'less'}}</a>
 </span>`
})
export class ReadMoreDirective implements OnChanges {
 @Input('text') text: string;
 @Input('maxLength') maxLength: number = 100;
 @Input('showToggleButton')showToggleButton:boolean;
 currentText: string;
 public isCollapsed: boolean = true;
 constructor(
 //private elementRef: ElementRef
 ) {
 }
 toggleView() {
 this.isCollapsed = !this.isCollapsed;
 this.determineView();
 }
 determineView() {
 if (this.text.length <= this.maxLength) {
 this.currentText = this.text;
 this.isCollapsed = false;
 return;
 }
 if (this.isCollapsed == true) {
 this.currentText = this.text.substring(0, this.maxLength) + "...";
 } else if(this.isCollapsed == false) {
 this.currentText = this.text;
 }
 }
 ngOnChanges() {
 if(!this.validateSource(this.text)) {
 //throw 'Source must be a string.';
 console.error('Source must be a string.');
 }
 else{
 this.determineView();
 }
 }
 validateSource(s) {
 if(typeof s !== 'string') {
 return false;
 } else {
 return true;
 }
 }
}

and usage

<read-more [text]="this is test text" [maxLength]="10" [showToggleButton]="true"></read-more>

• Rajat Masih: Best answer without CSS

Answer 5

Again i solved these types of problem with dynamic data and full controlling.

 <div class="Basic-Info-para">
 <p>
 <span *ngIf="personalBasicModel.professionalSummary.length>200" id="dots"> 
 {{personalBasicModel.professionalSummary | slice:0:200}} ...
 </span>
 <span id="more">{{personalBasicModel.professionalSummary }}
</span>
 </p>
</div> 

Here , personalBasicModel.professionalSummary contain string . like any text.
slice:0:200 = use slice pipe for splice string with 200 character length . you can be change length according your requirement. id="dots" & id="more" two important thing.

<div class="Basic-Info-SeeMore">
 <button class="SeeMore"(click)="showMore(paasValueOn_SeeMoreBtn)">
 {{showLess_More}}
 </button>
 </div>

Here we define a button with dynamic text (see more and see less ) with click event.

//---------------------------------- ts file -----------------------------------//

Define variable

showLess_More : string = "SEE MORE...";
paasValueOn_SeeMoreBtn : boolean = true;

Event(Method) fire when user click on see more button

 showMore(data:boolean){
 if(data){
 $("#dots").css('display', 'none');
 $("#more").css('display', 'inline');
 this.showLess_More = "SEE LESS ...";
 this.paasValueOn_SeeMoreBtn = false;
 }else{
 $("#dots").css('display', 'inline');
 $("#more").css('display', 'none');
 this.showLess_More = "SEE MORE...";
 this.paasValueOn_SeeMoreBtn = true;
 }
 }

Answer 6

If you want to display the text to the maximum number of chars without cutting any word, change this line of code:

this.currentText = this.text.substring(0, this.maxLength) + "...";

To:

this.currentText = this.text.substring(0, this.maxLength);
this.currentText = this.currentText.substr(0, Math.min(this.currentText.length, this.currentText.lastIndexOf(" ")))
this.currentText = this.currentText + "..."

Answer 7

Just a slight improvement of @Andrei Zhytkevich code (useful for markdown)

import {
 Component,
 AfterViewInit,
 ViewChild,
 ElementRef,
 Attribute,
 ChangeDetectionStrategy } from '@angular/core';
@Component({
 changeDetection: ChangeDetectionStrategy.OnPush,
 selector: 'ui-read-more',
 template: `
 <div [class.collapsed]="isCollapsed" [style.height]="_height">
 <div #wrapper>
 <ng-content></ng-content>
 </div>
 </div>
 <div class="read-more">
 <button
 type="button"
 class="btn btn-light" (click)="onIsCollapsed()">{{isCollapsed ? 'More' : 'Less'}}</button>
 </div>
 `,
 styles: [`
 :host{
 display: block;
 }
 .collapsed {
 overflow: hidden;
 padding-bottom: 1rem;
 }
 .read-more{
 display: flex;
 justify-content: flex-end;
 }
 `]
})
export class UiReadMoreComponent implements AfterViewInit{
 @ViewChild('wrapper') wrapper: ElementRef;
 isCollapsed: boolean = true;
 private contentHeight: string;
 private _height: string;
 constructor(@Attribute('height') public height: string = '') {
 this._height = height;
 }
 ngAfterViewInit() {
 this.contentHeight = this.wrapper.nativeElement.clientHeight + 'px';
 }
 onIsCollapsed(){
 this.isCollapsed = !this.isCollapsed;
 this._height = this.isCollapsed ? this.height : this.contentHeight;
 }
}

Usage

<ui-read-more height="250px">
 <ngx-md>
 {{post.content}}
 </ngx-md>
</ui-read-more>

Answer 8

Thank you, I changed it up a bit for it be on NgOnInit because of the console error. There's a slight change to it and works well with Angular 6.

@Component({
selector: 'app-read-more',
template: `
 <div id="textCollapse" [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
 </div>
 <a *ngIf="isCollapsible" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed ? 'more':'less'}}</a>
`,
styles: [`
 div.collapsed {
 overflow: hidden;
 }
 a {
 color: #007bff !important;
 cursor: pointer;
 }
`]
})
export class ReadMoreComponent implements OnInit {
// the text that need to be put in the container
@Input() text: string;
// maximum height of the container
@Input() maxHeight: number;
// set these to false to get the height of the expended container 
public isCollapsed = false;
public isCollapsible = false;
constructor(private elementRef: ElementRef) {
}
ngOnInit() {
 const currentHeight = document.getElementById('textCollapse').offsetHeight;
 if (currentHeight > this.maxHeight) {
 this.isCollapsed = true;
 this.isCollapsible = true;
 }
 }
}

As you can see I changed the
const current Height = document.getElementById('textCollapse').offsetHeight;

Answer 9

You can use this plugin.

It is very simple to use only to pass [text] and [textLength] which you want to show by default https://www.npmjs.com/package/nga-read-more

Answer 10

lineheight approach:-

lineheight and little calculation and some css text-overflow: ellipsis; does this job.

.css

.descLess {
 margin-bottom: 10px;
 text-overflow: ellipsis;
 overflow: hidden;
 word-wrap: break-word;
 display: -webkit-box;
 line-height: 1.8; <==== adjust line-height...a/q to your need
 letter-spacing: normal;
 white-space: normal;
 max-height: 52px; <==== 250px etc:-
 width: 100%;
 /* autoprefixer: ignore next */
 -webkit-line-clamp: 2; <==== clamp line 2...or 3 or 4 or 5...
 -webkit-box-orient: vertical;
}

.html

 <div class="col-12 rmpm">
 <div id="descLess" *ngIf="seeMoreDesc === 'false'" class="descLess col-12 rmpm">
 {{inputData?.desc}}
 </div>
 <div *ngIf="seeMoreDesc === 'true'" class="col-12 rmpm" style="margin-bottom: 10px;line-height: 1.8;"> 
 <!--Use Line height here-->
 {{inputData?.desc}}
 </div>
 <span class="seeMore" *ngIf="seeMoreDesc === 'false' && lineHeightDesc > 21"
 (click)="updateSeeMore('seeMoreDesc', 'true')">
 See More
 </span>
 <span class="seeMore" *ngIf="seeMoreDesc === 'true'"
 (click)="updateSeeMore('seeMoreDesc', 'false')">
 See Less
 </span>
 </div>

.ts

declare const $:any;
seeMoreDesc = 'false';
seeMore = '';
inputData = {
 'desc':'Lorem Ipusme dummy text..................'
 }
 constructor(
 private eRef: ElementRef,
 private cdRef : ChangeDetectorRef
 ) {}
 ngAfterViewChecked() {
 // pass line height here
 this.lineHeightDesc = (Number($('#descLess').height()) / 1.8);
 this.cdRef.detectChanges();
 }
 public updateSeeMore(type, action) {
 if (type === 'seeMoreDesc') {
 this.seeMoreDesc = action;
 this.cdRef.detectChanges();
 } else if (type === 'seeMore') {
 this.seeMore = action;
 this.cdRef.detectChanges();
 }
 }