Setting Up Pagination for Cards in an Angular Application with Spring Boot Backend

Are you building an Angular application with a Spring Boot backend and need to implement pagination for card data? Pagination is a common requirement for displaying large datasets, and it ensures a smooth user experience when navigating through extensive lists of items. In this guide, we’ll walk you through the steps to set up a paginator for cards in your Angular application with a Spring Boot backend.

Springboot & Angular

Step 1: Set Up Your Spring Boot Backend

Before you can implement pagination in your Angular application, make sure your Spring Boot backend is configured to provide paginated card data. To achieve this, you can create REST API endpoints that return a subset of card data based on pagination parameters, such as page number and page size.

Here’s an example of how you can create a Spring Boot controller that returns paginated card data:

@RestController
@RequestMapping("/api/cards")
public class CardController {

    @Autowired
    private CardService cardService;

    @GetMapping("/paginated")
    public ResponseEntity<Page<Card>> getPaginatedCards(@RequestParam int page, @RequestParam int size) {
        Pageable pageable = PageRequest.of(page, size);
        Page<Card> cards = cardService.findAll(pageable);
        return ResponseEntity.ok(cards);
    }
}

Step 2: Create an Angular Component for Cards

Next, create an Angular component responsible for displaying the cards. You can use Angular Material for styling and pagination components. Ensure that Angular Material is included in your project.

Here’s an example of a simple card component in Angular:

card.component.ts

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

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() card: any; // Assuming you have a Card model

  constructor() { }
}

And the corresponding HTML template:

card.component.html

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ card.title }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    {{ card.description }}
  </mat-card-content>
</mat-card>

Step 3: Set Up Pagination in Your Angular Component

In the Angular component where you want to display paginated cards, you can use Angular Material’s mat-paginator component to handle pagination. Additionally, you’ll need to make HTTP requests to your Spring Boot backend to fetch the paginated data.

Here’s an example of how you can set up pagination in your component:

card-list.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PageEvent } from '@angular/material/paginator';

@Component({
  selector: 'app-card-list',
  templateUrl: './card-list.component.html',
  styleUrls: ['./card-list.component.css']
})
export class CardListComponent implements OnInit {
  cards: any[] = [];
  pageSize = 10;
  pageIndex = 0;
  totalItems = 0;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.loadCards();
  }

  loadCards() {
    const apiUrl = `/api/cards/paginated?page=${this.pageIndex}&size=${this.pageSize}`;
    this.http.get<any>(apiUrl).subscribe(data => {
      this.cards = data.content;
      this.totalItems = data.totalElements;
    });
  }

  onPageChange(event: PageEvent) {
    this.pageIndex = event.pageIndex;
    this.pageSize = event.pageSize;
    this.loadCards();
  }
}

Step 4: Add Pagination UI to Your Component’s Template

In your component’s HTML template, add the Angular Material paginator component and loop through the cards to display them.

card-list.component.html

<div *ngFor="let card of cards">
  <app-card [card]="card"></app-card>
</div>

<mat-paginator
  [pageSize]="pageSize"
  [pageIndex]="pageIndex"
  [pageSizeOptions]="[10, 25, 50]"
  [length]="totalItems"
  (page)="onPageChange($event)"
></mat-paginator>

Step 5: Include the CardListComponent in Your App

Don’t forget to include your CardListComponent in your app's module and set up routing if necessary.

By following these steps, you’ll have a fully functional pagination system for displaying cards in your Angular application, with data fetched from your Spring Boot backend. Be sure to adjust the code to match your specific card data model and styling preferences.

That’s it! You’ve successfully set up pagination for cards in your Angular application. Enjoy the improved user experience and smoother navigation through your card data.