blog.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class BlogComponent implements OnInit {
  lists;
  slug;
  blog;
  listPage: boolean = false;
  singlePage: boolean = false;
  pageCount = 1;
  load_button_text:string="Load more";
  recent_posts;

  constructor(private http: Http, private route: ActivatedRoute) { }

  ngOnInit() {
    this.http.get('/api/v1/invitation/blog/recent-posts')
      .subscribe(
        (res: Response) => {
            this.recent_posts = res.json();
        }
      )
    if(this.route.snapshot.url.length == 1){
      this.listPage = true
      this.http.get('/api/v1/invitation/blog')
      .subscribe(
        (res: Response) => {
            this.lists = res.json();
        }
      )
    }else if(this.route.snapshot.url.length == 2){
      this.slug = this.route.snapshot.params["slug"]
      this.singlePage = true
      this.http.get('/api/v1/invitation/blog' + '/' + this.slug)
      .subscribe(
        (res: Response) => {
            this.blog = res.json();
            console.log(this.blog);
        }
      )
    }

    this.http.get('/api/v1/invitation/blog')
      .subscribe(
        (res: Response) => {
            this.lists = res.json();
        }
      )
  }
  
  onScroll () {
    if (this.pageCount <= this.lists.total_pages){
      this.http.get('api/v1/invitation/blog/load-more' + "?page=" + this.pageCount)
        .subscribe(
          (response: Response) => {
            this.lists.blogs.push(...response.json().blogs);
            this.pageCount += 1;
          },
          (error) => {
            console.log(error);
          }
        )
    }else
    {
      this.load_button_text = "No more items"
    }   
  }
}