why items in not push in array using angular?

Question

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

it works fine stackblitz.com/edit/angular-4beuhw?file=src/app/… — Sajeetharan
– Sajeetharan, Commented Jul 11, 2018 at 4:17

Sajeetharan · Accepted Answer · 2018-07-11 04:40:15Z

2

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

answered Jul 11, 2018 at 4:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user944513 Over a year ago

why you use changeDetector ..?

user944513 Over a year ago

why I need changeDetector ref ?

Sajeetharan Over a year ago

@user944513 you have to trigger the changes manually thats why you need changeDetector

Collectives™ on Stack Overflow

why items in not push in array using angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related