CODEWITHSUNDEEP
angulartypescript
GudenLjunkan
GudenLjunkan

Reputation: 11

Angular load more on first scroll event

I need some help to make my angular-application to on initialize load three objects, and as soon as the user scrolls all the remaining objects will load. But I'm kinda stuck and have no idea how to move on from here.. Could someone give me a hand and help me or at least point me in the right direction?

Here's my code: (Sorry for such a long code post)

import {
Component,
ComponentFactoryResolver,
OnDestroy,
OnInit,
ViewContainerRef,
Type,
ViewChild,
Input,
ViewEncapsulation
} from '@angular/core';
import {Location} from '@angular/common';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/takeUntil';
import { SectionsService } from './sections.service';
import { Router } from '@angular/router';
import {GlobalsService} from './globals.service';

@Component({
  selector: 'app-sections',
  templateUrl: './sections.component.html',
  styleUrls: ['./sections.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SectionsComponent implements OnDestroy, OnInit {

@ViewChild('sections', {read: ViewContainerRef}) sections;

private ngUnsubscribe: Subject<boolean> = new Subject();
private pathString;
private lang = '';
public notFound = false;

constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    private sectionsService: SectionsService,
    private location: Location,
    private router: Router,
    private globalsService: GlobalsService,
) {
    this.pathString = location.path();
    this.lang = this.globalsService.getLanguage() !== '' ? '/' + this.globalsService.getLanguage() : '';
}


getSections(pagePath): void {
    if (pagePath === '/undefined' || pagePath === '/false') {
        return;
    }

    this.sectionsService.getSections(pagePath)
        .takeUntil(this.ngUnsubscribe)
        .subscribe(
        res => {
          const loadFirst = res.slice(0, 3);
          const loadAfter = res.slice(2).event.srcElement.scrollTop;
          this.loadSections(res, pagePath);
        },
        error => {
            this.notFound = true;
        });
}

loadSections(sections, pagePath) {
    for (const section in sections) {
        if (sections.hasOwnProperty(section)) {
            this.loadSection(sections[section].charAt(0).toUpperCase() + sections[section]
                .substr(1).toLowerCase() + 'Component',
                section,
                pagePath,
                section);
        }
    }

    this.globalsService.setDoneLoading(true);
}

loadSection(section, sectionUniqueId, pagePath, index) {
    const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
    const factoryClass = <Type<any>>factories.find((x: any) => x.componentName === section);

    const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
    const ref = this.sections.createComponent(factory);
    ref.instance.sectionUniqueId = sectionUniqueId;
    ref.instance.sectionPagePath = pagePath;
    ref.instance.sectionIndex = index;
    ref.changeDetectorRef.detectChanges();
}

ngOnInit() {
    this.getSections(this.pathString);
}

ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
}

}

Upvotes: 0

Views: 1110

Answers (1)

last_seen_404
last_seen_404

Reputation: 202

You can use angular cdk virtual scroll which will allow you render data on scroll. https://material.angular.io/cdk/scrolling

Upvotes: 1

Related Questions