Angular Bootstrap pagination

import { Component, ViewChildren, QueryList, ElementRef, HostListener, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements AfterViewInit {
  @ViewChildren('pages') pages: QueryList<ElementRef>;

  allPosts = [
      { id: 1, title: 'Post 1' },
      { id: 2, title: 'Post 2' },
      { id: 3, title: 'Post 3' },
      { id: 4, title: 'Post 4' },
      { id: 5, title: 'Post 5' },
      { id: 6, title: 'Post 6' },
      { id: 7, title: 'Post 7' },
      { id: 8, title: 'Post 8' },
      { id: 9, title: 'Post 9' },
      { id: 10, title: 'Post 10' },
      { id: 11, title: 'Post 11' },
      { id: 12, title: 'Post 12' }
  ];

  activePage = 1;
  pageCount: Array<any> = [1, 2, 3];
  first = 1;
  last = 4;

  @HostListener('click', ['$event']) onclick(event: any) {
      if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 3) {
          (this.activePage as number) = +event.target.parentElement.innerText;
          this.clearActive();
          this.renderer.addClass(event.target.parentElement, 'active');
      }
      this.first = +this.activePage * 4 - 4 + 1;
      this.last = +this.activePage * 4;
  }

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngAfterViewInit() {
      this.clearActive();
      this.renderer.addClass(this.pages.first.nativeElement, 'active');
      this.activePage = 1;
      this.first = +this.activePage * 4 - 4 + 1;
      this.last = +this.activePage * 4;
  }

  clearActive() {
      this.pages.forEach(element => {
          this.renderer.removeClass(element.nativeElement, 'active');
      });
  }

  firstPage() {
      this.clearActive();
      const firstPage = this.pages.first.nativeElement;
      console.log(firstPage);
      (this.activePage as number) = +firstPage.innerText;
      this.clearActive();
      this.renderer.addClass(firstPage, 'active');

      this.first = +this.activePage * 4 - 4 + 1;
      this.last = +this.activePage * 4;
  }

  lastPage() {
      this.clearActive();
      const lastPage = this.pages.last.nativeElement;
      (this.activePage as number) = +lastPage.innerText;
      this.clearActive();
      this.renderer.addClass(lastPage, 'active');

      this.first = +this.activePage * 4 - 4 + 1;
      this.last = +this.activePage * 4;
  }

}

import { Component, OnInit, AfterContentChecked, AfterViewInit, QueryList, ElementRef, ViewChildren, HostListener, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-pagination-advanced',
  templateUrl: './pagination-advanced.component.html',
  styleUrls: ['./pagination-advanced.component.scss']
})
export class PaginationAdvancedComponent implements AfterViewInit, OnInit, AfterContentChecked {
  @ViewChildren('pages') pages: QueryList<ElementRef>;
  @ViewChild('next') next: ElementRef;
  @ViewChild('prev') prev: ElementRef;
  data: any = [
    { id: 1, title: 'item 1' },
    { id: 2, title: 'item 2' },
    { id: 3, title: 'item 3' },
    { id: 4, title: 'item 4' },
    { id: 5, title: 'item 5' },
    { id: 6, title: 'item 6' },
    { id: 7, title: 'item 7' },
    { id: 8, title: 'item 8' },
    { id: 9, title: 'item 9' },
    { id: 10, title: 'item 10' },
    { id: 11, title: 'item 11' },
    { id: 12, title: 'item 12' },
    { id: 13, title: 'item 13' },
    { id: 14, title: 'item 14' },
    { id: 15, title: 'item 15' },
    { id: 16, title: 'item 16' },
    { id: 17, title: 'item 17' },
    { id: 18, title: 'item 18' },
    { id: 19, title: 'item 19' },
    { id: 20, title: 'item 20' },
    { id: 21, title: 'item 21' },
    { id: 22, title: 'item 22' },
    { id: 23, title: 'item 23' },
    { id: 24, title: 'item 24' },
    { id: 25, title: 'item 25' },
    { id: 26, title: 'item 26' },
    { id: 27, title: 'item 27' },
    { id: 28, title: 'item 28' },
    { id: 29, title: 'item 29' },
    { id: 30, title: 'item 30' },
    { id: 31, title: 'item 31' },
    { id: 32, title: 'item 32' },
    { id: 33, title: 'item 33' },
    { id: 34, title: 'item 34' },
    { id: 35, title: 'item 35' },
    { id: 36, title: 'item 35' },
    { id: 37, title: 'item 35' },
    { id: 38, title: 'item 35' },
    { id: 39, title: 'item 35' },
    { id: 40, title: 'item 35' },
    { id: 41, title: 'item 35' },
    { id: 42, title: 'item 35' },
    { id: 43, title: 'item 35' },
    { id: 44, title: 'item 35' },
    { id: 45, title: 'item 35' },
    { id: 46, title: 'item 35' },
    { id: 47, title: 'item 35' },
    { id: 48, title: 'item 35' },
    { id: 49, title: 'item 35' },
    { id: 50, title: 'item 35' },
    { id: 51, title: 'item 35' },
    { id: 52, title: 'item 35' },
    { id: 53, title: 'item 35' },
    { id: 54, title: 'item 35' },
    { id: 55, title: 'item 35' },
    { id: 56, title: 'item 35' },
    { id: 57, title: 'item 35' },
    { id: 58, title: 'item 35' },
    { id: 59, title: 'item 35' },
    { id: 60, title: 'item 35' },
    { id: 61, title: 'item 35' },
    { id: 62, title: 'item 35' },
    { id: 63, title: 'item 35' },
    { id: 64, title: 'item 35' },
    { id: 65, title: 'item 35' },
    { id: 66, title: 'item 35' },
    { id: 67, title: 'item 35' },
    { id: 68, title: 'item 35' },
    { id: 69, title: 'item 35' },
    { id: 70, title: 'item 35' },
    { id: 71, title: 'item 35' },
    { id: 72, title: 'item 35' },
    { id: 73, title: 'item 35' },
    { id: 74, title: 'item 35' },
    { id: 75, title: 'item 35' },
    { id: 76, title: 'item 35' },
    { id: 77, title: 'item 35' },
    { id: 78, title: 'item 35' },
    { id: 79, title: 'item 35' },
    { id: 80, title: 'item 35' },
    { id: 81, title: 'item 35' },
    { id: 82, title: 'item 35' },
    { id: 83, title: 'item 35' },
    { id: 84, title: 'item 35' },
    { id: 85, title: 'item 35' },
    { id: 86, title: 'item 35' },
    { id: 87, title: 'item 35' },
    { id: 88, title: 'item 35' },
    { id: 89, title: 'item 35' },
    { id: 90, title: 'item 35' },
    { id: 91, title: 'item 35' },
    { id: 92, title: 'item 35' },
    { id: 93, title: 'item 35' },
    { id: 94, title: 'item 35' },
    { id: 95, title: 'item 35' },
    { id: 96, title: 'item 35' },
    { id: 97, title: 'item 35' },
    { id: 98, title: 'item 35' },
    { id: 99, title: 'item 35' },
    { id: 100, title: 'item 35' },
  ];
  pagination: Array<any> = [];
  activePage: number;
  firstElement: number = null;
  lastElement: number = null;
  nextElements = [];
  nextElementsCounter = 0;
  firstActiveElement = null;

  @HostListener('click', ['$event']) onclick(event: any) {
    this.renderer.addClass(event.target.parentElement.parentElement, 'active');
    this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
    if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 10) {
      this.getFirstAndLastElement(event);

    }
    if (!this.pages.first.nativeElement.classList.contains('active')) {
      this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
      this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    }

  }

  constructor(private renderer: Renderer2) {

  }

  ngOnInit() {
    let paginationLength;
    setTimeout(() => {
      paginationLength = this.data.length / 10;
      // Setting up paginators (clickable pages)
      for (let i = 1; i <= paginationLength; i++) {
        this.pagination.push(i);
      }
    }, 1000);

  }

  ngAfterViewInit() {
    this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
    setTimeout(() => {
      this.pages.forEach(element => {
        this.nextElements.push(element);
      });
      this.renderer.addClass(this.pages.first.nativeElement, 'active');
      this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
      this.activePage = this.firstActiveElement.nativeElement.innerText;
      this.firstElement = (+this.activePage) * 10 - 10 + 1;
      this.lastElement = (+this.activePage) * 10;
    }, 1000);

  }

  ngAfterContentChecked() {
    setTimeout(() => {
      if (this.pages.first.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
      }

      if (this.pages.last.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.next.nativeElement.firstElementChild, 'disabled', 'true');
      }
    }, 1000);

  }

  getActivePage(event: any) {
    return this.activePage = event.target.parentElement.innerText;
  }

  getFirstAndLastElement(event: any) {
    this.getFirstElement(event);
    this.getLastElement(event);
  }

  getFirstElement(event: any) {
    return this.firstElement = this.getActivePage(event) * 10 - 10 + 1;
  }

  getLastElement(event: any) {
    return this.lastElement = this.getActivePage(event) * 10;
  }


  clearActive() {
    this.pages.forEach(element => {
      this.renderer.removeClass(element.nativeElement, 'active');
    });
  }

  firstPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.first.nativeElement, 'active');

    this.activePage = this.pages.first.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  lastPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.last.nativeElement, 'active');

    this.activePage = this.pages.last.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  nextPage(event: any) {
    this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
    try {
      if (this.firstActiveElement) {
        // Finds first active element (with class .active)
        this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
        this.activePage = this.firstActiveElement.nativeElement.innerText;
        this.firstElement = (+this.activePage + 1) * 10 - 10 + 1;
        this.lastElement = (+this.activePage + 1) * 10;
      }
    } catch (error) {

    }

    if (this.firstActiveElement != undefined) {
      this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
      this.renderer.addClass(this.firstActiveElement.nativeElement.nextElementSibling, 'active');
    } else {
      if (this.nextElements[0].nativeElement.classList.contains('active')) {
        this.renderer.removeClass(this.nextElements[0].nativeElement, 'active');
      }
      if (this.nextElements[0] === undefined) {
        this.nextElementsCounter++;
      }
      if (this.nextElementsCounter !== 0) {
        this.renderer.removeClass(this.nextElements[(this.nextElementsCounter - 1)].nativeElement, 'active');
      }
      this.renderer.addClass(this.nextElements[this.nextElementsCounter++].nativeElement, 'active');

      try {
        this.activePage = +this.pages.first.nativeElement.innerText;
        this.firstElement = this.activePage * 10 - 10 + 1;
        this.lastElement = this.activePage * 10;
      } catch (error) {
      }
    }
  }

  prevPage(event: any) {
    this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
    this.renderer.addClass(this.firstActiveElement.nativeElement.previousElementSibling, 'active');
    this.activePage = +this.firstActiveElement.nativeElement.innerText - 1;
    this.firstElement = (+this.activePage) * 10 - 10 + 1;
    this.lastElement = (+this.activePage) * 10;
  }

}

import { Component, OnInit, AfterContentChecked, AfterViewInit, QueryList, ElementRef, ViewChildren, HostListener, Renderer2, ViewChild } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-pagination-api',
  templateUrl: './pagination-api.component.html',
  styleUrls: ['./pagination-api.component.scss']
})
export class PaginationApiComponent implements AfterViewInit, OnInit, AfterContentChecked {
  @ViewChildren('pages') pages: QueryList<ElementRef>;
  @ViewChild('next') next: ElementRef;
  @ViewChild('prev') prev: ElementRef;
  url = 'https://jsonplaceholder.typicode.com/posts';
  data;
  pagination: Array<any> = [];
  activePage: number;
  firstElement: number = null;
  lastElement: number = null;
  nextElements = [];
  nextElementsCounter = 0;
  firstActiveElement = null;

  @HostListener('click', ['$event']) onclick(event: any) {
    this.renderer.addClass(event.target.parentElement.parentElement, 'active');
    this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
    if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 10) {
      this.getFirstAndLastElement(event);

    }
    if (!this.pages.first.nativeElement.classList.contains('active')) {
      this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
      this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    }
  }

  constructor(private http: Http, private renderer: Renderer2) {
    this.http.get(this.url).map(res => res.json()).subscribe(next => {
      this.data = next;
    });
  }

  ngOnInit() {
    let paginationLength;
    setTimeout(() => {
      paginationLength = this.data.length / 10;
      // Setting up paginators (clickable pages)
      for (let i = 1; i <= paginationLength; i++) {
        this.pagination.push(i);
      }
    }, 1000);

  }

  ngAfterViewInit() {
    this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
    setTimeout(() => {
      this.pages.forEach(element => {
        this.nextElements.push(element);
      });
      this.renderer.addClass(this.pages.first.nativeElement, 'active');
      this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
      this.activePage = this.firstActiveElement.nativeElement.innerText;
      this.firstElement = (+this.activePage) * 10 - 10 + 1;
      this.lastElement = (+this.activePage) * 10;
    }, 1000);

  }

  ngAfterContentChecked() {
    setTimeout(() => {
      if (this.pages.first.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
      }

      if (this.pages.last.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.next.nativeElement.firstElementChild, 'disabled', 'true');
      }
    }, 1000);
    
  }

  getActivePage(event: any) {
    return this.activePage = event.target.parentElement.innerText;
  }

  getFirstAndLastElement(event: any) {
    this.getFirstElement(event);
    this.getLastElement(event);
  }

  getFirstElement(event: any) {
    return this.firstElement = this.getActivePage(event) * 10 - 10 + 1;
  }

  getLastElement(event: any) {
    return this.lastElement = this.getActivePage(event) * 10;
  }


  clearActive() {
    this.pages.forEach(element => {
      this.renderer.removeClass(element.nativeElement, 'active');
    });
  }

  firstPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.first.nativeElement, 'active');

    this.activePage = this.pages.first.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  lastPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.last.nativeElement, 'active');

    this.activePage = this.pages.last.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  nextPage(event: any) {
    this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
    try {
      if (this.firstActiveElement) {
        // Finds first active element (with class .active)
        this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
        this.activePage = this.firstActiveElement.nativeElement.innerText;
        this.firstElement = (+this.activePage + 1) * 10 - 10 + 1;
        this.lastElement = (+this.activePage + 1) * 10;
      }
    } catch (error) {

    }

    if (this.firstActiveElement != undefined) {
      this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
      this.renderer.addClass(this.firstActiveElement.nativeElement.nextElementSibling, 'active');
    } else {
      if (this.nextElements[0].nativeElement.classList.contains('active')) {
        this.renderer.removeClass(this.nextElements[0].nativeElement, 'active');
      }
      if (this.nextElements[0] === undefined) {
        this.nextElementsCounter++;
      }
      if (this.nextElementsCounter !== 0) {
        this.renderer.removeClass(this.nextElements[(this.nextElementsCounter - 1)].nativeElement, 'active');
      }
      this.renderer.addClass(this.nextElements[this.nextElementsCounter++].nativeElement, 'active');

      try {
        this.activePage = +this.pages.first.nativeElement.innerText;
        this.firstElement = this.activePage * 10 - 10 + 1;
        this.lastElement = this.activePage * 10;
      } catch (error) {
      }
    }
  }

  prevPage(event: any) {this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
    this.renderer.addClass(this.firstActiveElement.nativeElement.previousElementSibling, 'active');
    this.activePage = +this.firstActiveElement.nativeElement.innerText - 1;
    this.firstElement = (+this.activePage) * 10 - 10 + 1;
    this.lastElement = (+this.activePage) * 10;
  }
}