ionic 2 + angular 2 : auto scroll to bottom of list / page / chat

Question

I\'m trying to code a page with two segments \"chat\" and \"content\". I want that one \"chat\" segment the page auto-scroll to the bottom with no effect. The chat is a &l

Answer 1

This could help someone, I have given similar answer in Ionic forum. This is implemented in Ionic 3.

I used ngAfterViewChecked() to achieve this feature. Following is my code structure -

home.html -

    

        // All messages elemets. Scroll
    

home.ts -

import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements AfterViewChecked{
    // used for scrolling the pane
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    scrollToBottom(): void {
        // method used to enable scrolling
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }
}

.scrollTop and .scrollHeight are JavaScript properties, see here.