Directive for Angular 2: Expand Further

Question

Directive for Angular 2: Expand Further

Looking to create a custom readmore directive in Angular2 that will collapse and expand long blocks of text based on a specified max height, rather than character count. The directive will include "Read more" and "Close" links.

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

Seeking advice on the most reliable method for getting/setting the height of the element in this scenario.

Any suggestions or guidelines on how to implement this directive would be greatly appreciated.

Similar functionality is needed to what can be seen here: https://github.com/jedfoster/Readmore.js

Solution:

Thanks to Andzhik's help, I have managed to create the following component that fulfills 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 you have any suggestions for improvement, please feel free to share.

angular typescript angular2-template angular2-directives

Answer 1

Answer №1

My latest adaptation focuses on character count instead of the size of the div container.

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();       
    }
}

How to utilize:

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

Answer 2

My latest adaptation focuses on character count instead of the size of the div container.

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();       
    }
}

How to utilize:

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

Answer 3

Answer №2

If you're looking to implement a feature with a "Read more" button, it's best to use a Component instead of a Directive. Components are more suitable for this purpose as they allow for easier manipulation of the 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;
}

To use this component:

<read-more>
   <!-- Your HTML content here -->
</read-more>

Answer 4

If you're looking to implement a feature with a "Read more" button, it's best to use a Component instead of a Directive. Components are more suitable for this purpose as they allow for easier manipulation of the 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;
}

To use this component:

<read-more>
   <!-- Your HTML content here -->
</read-more>

Answer 5

Answer №3

Thanks to the expertise of Andzhik, I was able to create a customized component that perfectly aligns with my needs.

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 6

Thanks to the expertise of Andzhik, I was able to create a customized component that perfectly aligns with my needs.

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 7

Answer №4

import { Component, Input,OnChanges} from '@angular/core';
@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="currentContent"></div>
        <span *ngIf="displayToggleButton">
            <a (click)="toggleView()">{{isCollapsed? 'Read more':'Read less'}}</a>
        </span>`
})

export class ReadMoreDirective implements OnChanges {

    @Input('content') content: string;
    @Input('maxLength') maxLength: number = 100;
    @Input('displayToggleButton') displayToggleButton:boolean;

    currentContent: string;
    public isCollapsed: boolean = true;

    constructor() {}

    toggleView() {
        this.isCollapsed = !this.isCollapsed;
        this.displayContent();
    }

    displayContent() {
        if (this.content.length <= this.maxLength) {
            this.currentContent = this.content;
            this.isCollapsed = false;
            return;
        }

        if (this.isCollapsed == true) {
            this.currentContent = this.content.substring(0, this.maxLength) + "...";
        } else if(this.isCollapsed == false) {
            this.currentContent = this.content;
        }
    }

    ngOnChanges() {
        if(!this.checkSource(this.content)) {
            console.error('Source must be a string.');
        } else {
            this.displayContent();
        }
    }

    checkSource(s) {
        if(typeof s !== 'string') {
            return false;
        } else {
            return true;
        }
    }
}

Usage example:

<read-more [content]="'This is a test content'" [maxLength]="10" [displayToggleButton]="true"></read-more>

Answer 8

import { Component, Input,OnChanges} from '@angular/core';
@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="currentContent"></div>
        <span *ngIf="displayToggleButton">
            <a (click)="toggleView()">{{isCollapsed? 'Read more':'Read less'}}</a>
        </span>`
})

export class ReadMoreDirective implements OnChanges {

    @Input('content') content: string;
    @Input('maxLength') maxLength: number = 100;
    @Input('displayToggleButton') displayToggleButton:boolean;

    currentContent: string;
    public isCollapsed: boolean = true;

    constructor() {}

    toggleView() {
        this.isCollapsed = !this.isCollapsed;
        this.displayContent();
    }

    displayContent() {
        if (this.content.length <= this.maxLength) {
            this.currentContent = this.content;
            this.isCollapsed = false;
            return;
        }

        if (this.isCollapsed == true) {
            this.currentContent = this.content.substring(0, this.maxLength) + "...";
        } else if(this.isCollapsed == false) {
            this.currentContent = this.content;
        }
    }

    ngOnChanges() {
        if(!this.checkSource(this.content)) {
            console.error('Source must be a string.');
        } else {
            this.displayContent();
        }
    }

    checkSource(s) {
        if(typeof s !== 'string') {
            return false;
        } else {
            return true;
        }
    }
}

Usage example:

<read-more [content]="'This is a test content'" [maxLength]="10" [displayToggleButton]="true"></read-more>

Answer 9

Answer №5

Once again, I successfully tackled these types of problems using dynamic data and maintaining full control.

<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>

Within personalBasicModel.professionalSummary, there is a string resembling any text.
slice:0:200 = utilizing the slice pipe to truncate the string to 200 characters. You can adjust this length based on your needs. id="dots" & id="more" are two crucial elements.

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

Here, we have set up a button with dynamic text (see more and see less ) that triggers a click event.

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

Initialization of variables:

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

Event(Method) executed upon clicking the see more button:

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

    }

  }

Answer 10

Once again, I successfully tackled these types of problems using dynamic data and maintaining full control.

<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>

Within personalBasicModel.professionalSummary, there is a string resembling any text.
slice:0:200 = utilizing the slice pipe to truncate the string to 200 characters. You can adjust this length based on your needs. id="dots" & id="more" are two crucial elements.

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

Here, we have set up a button with dynamic text (see more and see less ) that triggers a click event.

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

Initialization of variables:

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

Event(Method) executed upon clicking the see more button:

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

    }

  }

Answer 11

Answer №6

For those looking to ensure that text is displayed in its entirety without cutting off any words, make the following adjustment to this section of code:

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 12

For those looking to ensure that text is displayed in its entirety without cutting off any words, make the following adjustment to this section of code:

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 13

Answer №7

Just a slight modification to @Andrei Zhytkevich's code snippet (great 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 14

Just a slight modification to @Andrei Zhytkevich's code snippet (great 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 15

Answer №8

Appreciate the feedback, I made some adjustments to ensure it functions correctly with NgOnInit and resolves the console error. There have been slight modifications to enhance compatibility 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 {

// text content for the container
@Input() text: string;

// maximum height of the container
@Input() maxHeight: number;

// set these to false to determine the expanded container's height 
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;
  }
 }
}

The following adjustment has been made:

const current Height = document.getElementById('textCollapse').offsetHeight;

Answer 16

Appreciate the feedback, I made some adjustments to ensure it functions correctly with NgOnInit and resolves the console error. There have been slight modifications to enhance compatibility 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 {

// text content for the container
@Input() text: string;

// maximum height of the container
@Input() maxHeight: number;

// set these to false to determine the expanded container's height 
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;
  }
 }
}

The following adjustment has been made:

const current Height = document.getElementById('textCollapse').offsetHeight;

Answer 17

Answer №9

This plugin is a great solution.

All you need to do is provide the parameters [text] and [textLength] to display your content by default. Check out this helpful plugin here

Answer 18

This plugin is a great solution.

All you need to do is provide the parameters [text] and [textLength] to display your content by default. Check out this helpful plugin here

Answer 19

Answer №10

Implementing Lineheight Technique:

By utilizing the lineheight property along with a bit of calculation and applying certain CSS styles like text-overflow: ellipsis;, achieving the desired result becomes feasible.

.css

.descLess {
  margin-bottom: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  display: -webkit-box;
  line-height: 1.8;      <==== adjust line-height as per requirement
  letter-spacing: normal;
  white-space: normal;
  max-height: 52px;  <==== set to 250px or other values accordingly
  width: 100%;
  /* autoprefixer: ignore next */
  -webkit-line-clamp: 2; <==== clamp lines at 2, 3, 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;"> 
         <!--Utilize 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 Ipsum 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();
            }

        }

Answer 20

Implementing Lineheight Technique:

By utilizing the lineheight property along with a bit of calculation and applying certain CSS styles like text-overflow: ellipsis;, achieving the desired result becomes feasible.

.css

.descLess {
  margin-bottom: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  display: -webkit-box;
  line-height: 1.8;      <==== adjust line-height as per requirement
  letter-spacing: normal;
  white-space: normal;
  max-height: 52px;  <==== set to 250px or other values accordingly
  width: 100%;
  /* autoprefixer: ignore next */
  -webkit-line-clamp: 2; <==== clamp lines at 2, 3, 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;"> 
         <!--Utilize 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 Ipsum 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();
            }

        }

Directive for Angular 2: Expand Further

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Usage

Answer №8

Answer №9

Answer №10

Implementing Lineheight Technique:

.css

.html

.ts

Similar questions

Encountering a TypeError in Angular FormControl Jest test: Circular structure being converted to JSON issue

Angular 2 components not properly handling two-way binding errors

Is it possible to create an observable with RXJS that emits only when the number of items currently emitted by the source observables matches?

A step-by-step guide for updating a minor version of Angular with Angular CLI

Navigating back to the login page in your Ionic V2 application can be achieved by utilizing the `this.nav

What is the best way to programmatically generate a service within Angular?

Navigating to the Login page in Angular 13

The file node_modules/angular2-qrscanner/angular2-qrscanner.d.ts has been detected as version 4, while version 3 was expected. Resolving symbol

Guide to dynamically resizing the Monaco editor component using react-monaco-editor

Subscribing to valueChanges in reactive forms to dynamically update checkbox options

An issue is preventing the Angular 2+ http service from making the requested call to the server

Issue with displaying decimal places in Nivo HeatMap

Enhancing an existing Angular1 project to Angular4 while incorporating CSS, Bootstrap, and HTML enhancements

Converting JSON data types into TypeScript interface data types

Guide to accessing Angular app on a mobile device within the same network

Can you explain the significance of the syntax #foo="myFoo" used in this template?

Utilizing Angular2 Observables for Time Interval Tracking

The proper order for logging in is to first validate the login credentials before attempting

Node.js/Express API Endpoint Ceases Functioning

Best Practices for Organizing Imports in Typescript to Prevent Declaration Conflicts