Angular 8 Tutorial - Simple Pagination Example

In this article, you’ll see a simple example of how to implement client-side pagination in Angular 8.

Example built with Angular 8.0.0

The example contains a hard coded array of 150 objects split into 15 pages to demonstrate how the pagination component works.

Angular 8 Pagination Component

Pagination is implemented with the `` component that comes with the jw-angular-pagination package available on npm.

Installation

Install the Angular 8 pagination component with the command npm install jw-angular-pagination.

Integration with your Angular 8 app

Import the JwPaginationComponent into your Angular app.module.ts and add it to the declarations array to make it available to other components within the Angular module.

This is the app module (app.module.ts) from the example, the pagination component is imported on line 3 and added to the declarations on line 13.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JwPaginationComponent } from 'jw-angular-pagination';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent,
        JwPaginationComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Usage

There are 2 required properties for using the Angular 8 pagination component:

• items - the array of items to be paged
• changePage - a callback function for handling the changePage event

There are also a few optional properties:

• pageSize - the number of items displayed on each page (defaults to 10)
• maxPages - the max number of page links to display in the pagination nav (defaults to 10)
• initialPage - the initial page to display (defaults to 1)

Example Angular 8 Component with Pagination

This is the app component (app.component.ts) from the example, it creates a hardcoded array of items to be paged in the ngOnInit() method, and updates the current page of items in the onChangePage() callback method.

import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    items = [];
    pageOfItems: Array;

    constructor() { }

    ngOnInit() {
        // an example array of 150 items to be paged
        this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1), name: `Item ${i + 1}`}));
    }

    onChangePage(pageOfItems: Array) {
        // update current page of items
        this.pageOfItems = pageOfItems;
    }
}

Example Angular 8 Component Template with Pagination

This is the app component template (app.component.html) from the example, it renders the current page of items using the *ngFor Angular directive on line 5, and includes the pagination component (``) on line 8.

The pagination component is bound to items property of the app component using the Angular model binding attribute [items]="items", and is bound to the onChangePage() method of the app component using the Angular event binding attribute (changePage)="onChangePage($event)".

    ### Angular 8 Pagination Example

    
        {{item.name}}

    
    
        
    

Styling the Pagination Component

The JW Angular pagination component is unstyled by default, you can use the below CSS selectors to add your own custom styles.

You can also plug in Bootstrap (3.x or 4.x) which the component works well with, that’s what I used in the example.

• .pagination - Pagination component container (ul element)
• .pagination .page-item - All list items in the pagination component
• .pagination .page-item .page-link - All pagination links including first, last, previous and next
• .pagination .number-item - All page numbers (1, 2, 3 etc) pagination elements
• .pagination .first-item - The ‘First’ pagination element
• .pagination .last-item - The ‘Last’ pagination element
• .pagination .previous-item - The ‘Previous’ pagination element
• .pagination .next-item - The ‘Next’ pagination element

Hiding Pagination Buttons

To hide any of the buttons you can simply set them to display: none; using the css selectors described above.

More Customisation of the Angular Pagination Component

If you want to make other customisations such as changing the HTML template of the component, I’d recommend just copying the pagination component code into your own custom Angular component, it’s only 60 lines and will give complete flexibility to make any changes you like.

To use this approach you need to install the jw-paginate package from npm with the command npm install jw-paginate. The jw-paginate package contains the pagination logic used to paginate any array or list of items. For more info about the pagination logic see this post.

This is the complete pagination component code, it’s also available here on GitHub.

import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';

import paginate = require('jw-paginate');

@Component({
  moduleId: module.id,
  selector: 'jw-pagination',
  template: `
  
      First
  
  
      Previous
  
  
      {{page}}
  
  
      Next
  
  
      Last
  
`
})

export class JwPaginationComponent implements OnInit, OnChanges {
  @Input() items: Array;
  @Output() changePage = new EventEmitter(true);
  @Input() initialPage = 1;
  @Input() pageSize = 10;
  @Input() maxPages = 10;

  pager: any = {};

  ngOnInit() {
    // set page if items array isn't empty
    if (this.items && this.items.length) {
      this.setPage(this.initialPage);
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    // reset page if items array has changed
    if (changes.items.currentValue !== changes.items.previousValue) {
      this.setPage(this.initialPage);
    }
  }

  private setPage(page: number) {
    // get new pager object for specified page
    this.pager = paginate(this.items.length, page, this.pageSize, this.maxPages);

    // get new page of items from items array
    var pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);

    // call change page function in parent component
    this.changePage.emit(pageOfItems);
  }
}

#angular #typescript

What is GEEK

Buddha Community

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

Angular 11 Pagination Example with ngx-pagination

In this tutorial, I will show you how to make Angular 11 Pagination example with existing API (server-side pagination) using ngx-pagination.

Overview of Angular 11 Pagination example

One of the most important things to make a website friendly is the response time, and pagination comes for this reason. For example, this bezkoder.com website has hundreds of tutorials, and we don’t want to see all of them at once. Paging means displaying a small number of all, by a page.

Assume that we have tutorials table in database like this:

Our Angular 11 app will display the result with pagination:

You can change to a page with larger index:

#angular #angular #angular 11 #ngx-pagination #pagination

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Angular 11 Google Social Login Example Tutorial

Angular 9/10/11 social login with google using angularx-social-login library example. In this tutorial, i will show you step by step on how to implement google social login in angular 11 app.

And also, this tutorial will show you How to login into Angular 10/11 application with google using angularx-social-login library in angular 11 app.

Google Login Integration In Angular 11 App

• Step 1 - Create New Angular App
• Step 2 - Install Social Login Library
• Step 3 - Add Code on App.Module.ts File
• Step 4 - Add Code on View File
• Step 5 - Add Code On App.Component ts File
• Step 6 - Start the Angular Google Login App

https://www.tutsmake.com/angular-11-google-social-login-example/

#angular 11 google login #angular 11 social-login example #login with google button angular 8/9/10/11 #angular 10/11 login with google #angular 10 social google login #angular social login google