why items in not push in array using angular?

I am trying to add more items in a list when user scroll or reached to bottom. I make a directive and check scroll position, if a user reaches at the bottom I called the component function using event emitter. My function is called but it is not added items in array .

Here is my code:

https://stackblitz.com/edit/angular-zsedct?file=src%2Fapp%2Fscroll.directive.ts

scroll = (e): void => {


    //e.target.scrollTop = current scroll position
    //e.target.scrollHeight - e.target.offsetHeight - to calculate the bottom. equivalent to scrollTopMax in FF
    if (e.target.scrollTop == e.target.scrollHeight - e.target.offsetHeight) {
      console.log('You reached the bottom!');
      this.valueChange.next();
    }

    //handle your scroll here
    //notice the 'odd' function assignment to a class field
    //this is used to be able to remove the event listener
  }; 

component

addMoreElement(){
    console.log('add more button')
     for(var i=0;i<5;i++){
      this.arr.push('hellp'+i)
    }
  }

is there any better way to do same task ? can you please tell me another way to implement same thing with some improvements

1 answer

  • answered 2018-07-11 04:40 Sajeetharan

    In order to reflect the data changes on the template, you need to use detect changes,

     constructor(private cdr:ChangeDetectorRef) {
    

    and

      this.cdr.detectChanges();
    

    STACKBLITZ DEMO