CODEWITHSUNDEEP
angulartypescript
Tom Rudge
Tom Rudge

Reputation: 3272

Angular [scrollTop] causing unwanted behaviour

https://stackblitz.com/edit/timeline-angular-7-1nb8fj

My app similar to the above "stackblitz" prototype is using [scrollTop] to move to the bottom of the list results.

<ul #list [scrollTop]="list.scrollHeight" class="list timeline">

<my-timeline-entry *ngFor="let entry of timeLine></my-timeline>

</ul>

So this will take us to the last entry in the timeline ngFor loop. The height of the window is calculated with css:

 .list{ 
    overflow-y: scroll;
    height:calc(100vh - 189px);
}

All works well.

A bug is introduced within the . I added a 'show more/show less' button depending on how much text is available.

component.html - 

<div *ngIf="timeEntryContent">
    <div class="col-11" *ngIf="timeEntryContent.length <= limit">{{timeEntryContent}}</div>
    <div class="row" *ngIf="truncating && timeEntryContent.length > limit">
        <div class="col-11">{{timeEntryContent | slice: 0:limit}}...</div>
            <div class="col-1"(click)="truncating = false">Show more</div>
    </div>
    <div class="row" *ngIf="!truncating && timeEntryContent.length > limit">
      <div class="col-11">{{timeEntryContent}}</div>
      <div class="col-1"(click)="truncating = true">show less</div>
    </div>
  </div>

component.ts - //added to ts file.

  @Input() limit: number = 60;
  truncating = true;

The issue - when clicking on 'show more or hide' the interface takes me back down to the last item instead of staying fixed on the entry you are trying to show more or less.

I've tried event.stopPropagation() on the click, other than this I'm not sure what else to suggest.

Please review my https://stackblitz.com/edit/timeline-angular-7-1nb8fj as you will understand more of the problem when using the demo.

Upvotes: 0

Views: 121

Answers (1)

Oleksii
Oleksii

Reputation: 56

Not sure what exactly wrong. But you can move your logic under the ngAfterViewInit hook in TimelineComponent:

@ViewChild('list')
list: ElementRef;

ngAfterViewInit() {
  this.list.nativeElement.scrollTop = this.list.nativeElement.scrollHeight;
}

Working example https://stackblitz.com/edit/timeline-angular-7-vxyykh?file=src/app/timeline/timeline.component.html

Upvotes: 1

Related Questions