Angular Material Paginator to use database data, not the static counter

Question

I am learging Angular and actually analysing the Angular Material Paginator, with the AngularMaterial Course.

Actually the mat-paginator page counter is based on a "static" property of a course lessonsCount:

<mat-paginator [length]="course?.lessonsCount"

the "database" is:

export const COURSES: any = {
    1: {
        id: 1,
        description: "Angular for Beginners",
        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/a.png',
        courseListIcon: 'https://angular-academy.s3.amazonaws.com/main-logo/m.png',
        longDescription: "Establish ...of Angular",
        category: 'BEGINNER',
        lessonsCount: 10
    }

and

export const LESSONS = {
    1: {
        id: 1,
        "description": "Angular Tutorial For Beginners - Bu...By Step",
        "duration": "4:17",
        "seqNo": 1,
        courseId: 1
    },
    2: {
        id: 2,
        "description": "Building Your First  Component - Component Composition",
        "duration": "2:07",
        "seqNo": 2,
        courseId: 1
    }

is there a way to remove that "hardcoded" lessonsCount property from the course class and use the number of lessons based on the lessons count from the db via courseId, and not from the course property "lessonsCount"?

Answer 1

Application Code : https://stackblitz.com/edit/angular-api-paginator-value?file=src/app/app.component.ts

• In <mat-paginator [length]="course?.lessonsCount", the <mat-paginator>, [length] can be bind to a property of a model class, like here in your case, its binded to lessonsCount property of course class.
• Or, can be binded to any private member variable of the component class, so you can bind that with a local component variable which can be updated from the dataArray length which is fetched from any api hit.

In the demo code attached, i have changed to <mat-paginator [length]="count", and this count property is updated from data fetched from an api. That api is called from a button click, and randomly calls an api which returns an array, and the length of the array is assigned to this member variable count.

Please comment if this is not the required scenario for the question.