Angular2 parent element calling children's onCheck

[Eric Martinez]

Hey there!

I'm trying to migrate my ng1 app to ng2.

I have this HTML structure, really simple

 <div class="col-md-1 scroll-list" lazy-scroll-last>
 
 <div class="list-group text-center">

 <lazy-scroll-image-last></lazy-scroll-image-last>
 
 </div>
 
 </div>

For my lazy-scroll-last div I have this directive

@Directive({
 selector : '[lazy-scroll-last]',
 host : {
 '(scroll)' : 'OnDivScroll()'
 }
})
export class LazyLoadScrollComponent {
 
 constructor(element: ElementRef) {

 }


 onInit() {
 console.log('Scroll div initiated');
 }


 OnDivScroll() {

 }
}

And for the lazy-scroll-image-last component I have this code (it prints over 720 elements)

@Component({
 selector : 'lazy-scroll-image-last',
 viewInjector : [httpInjectables]
})
@View({
 template : `

<a href="#/#img" 

class="list-group-item menu-thumbnail" 

*ng-for="#item of list_items; #i = index">

<img lazy-image [title]="item.image" />

h4>{{item.name}}</h4>

</a>

 `,
 directives: [NgFor, LazyImage] // LazyImage code skipped, not relevant
})
export class LazyLoadImageComponent {


 constructor(element: ElementRef, http: Http) {
 this.element = element;
 this.http = http;
 this.list_items = [];
 this.tmp_list_items = [];
 }


 onInit() {
 //console.log(this.http);
 this.http.get('json/filejson.json')
 .toRx()
 .map(res => res.json())
 .subscribe(tmp_items=> {this.tmp_list_items = tmp_items});
 }


 onCheck() {
 console.log('Child onCheck');
 if(typeof this.tmp_list_items !== 'undefined') {
 let keys = Object.keys(this.tmp_list_items);
 for(let i = 0; i < keys.length; i++) {
 this.list_items.push({
 name : this.tmp_list_items.items[keys[i]].name,
 image : this.tmp_list_items.items[keys[i]].image
 });
 }
 }
 }
}

Everything works, but everytime I scroll the div, the children's onCheck is called and that is making it extremely slow because of the logic I have inside of it,  Is that the expected behaviour?. When it is executed for the first time, the onCheck is called three times (I don't understand why) but it works. Then it loads the list (from the json, see onInit) with ng-for and prints it.

What I expect is the component (child element) to repeat the elements so I have my list, and then the parent div scroll over them and do some logic I still can't do because of this.

As far as I know and I understood, from the documentation the onCheck is called everytime the directive is being checked, but the directive being checked is the parent's one, not the children's. Is my approach wrong? (most likely).

I made this plunkr http://plnkr.co/edit/jDCu8H1qzG3Zqpc7VqRC?p=preview but I get a white screen, but at least you can see the code.

Any advice? Am I missing something obvious? 

Thanks in advance

[Eric Martinez]

Well, I found out that my approach was wrong. I don't know exactly how to use onCheck, but after a few more tries I moved my logic from onCheck to onInit like this

onInit() {
 //console.log(this.http);
 this.http.get('json/items_list.json')
    .toRx()
    .subscribe((res: Response) => {
        let items = res.json().items;
        let keys = Object.keys(items);

        for(let i = 0; i < keys.length; i++) {
            this.list_items.push({

                name : tmp_items[keys[i]].name,
                image : tmp_items[keys[i]].image
            });
        }
    });
 }

This way I don't need to use onCheck. And it fixed my issue. I hope it can help someone.