Angular - Server side pagination error in Angular 7

Question

I am using Angular 7 frontend and Laravel backend to build an App. I want to do Server-Side pagination on my pages, and I got my inspiration from pagination link

Laravel backend

 public function indexSmsmo()
{
    if(Auth::user()->id == 1)
        $smsmos = Smsmo::paginate(5);
    else 
    $smsmos = Smsmo::where('user_id',Auth::user()->id)->paginate(5);
    return $smsmos;      
}  

As show above, I started it from Laravel backend. Then proceeded to Angular

Angular:

model: smsmo.ts

export class Smsmo {
id: number;
msisdn: string;
message: string;
short_code_called: string;
packaged_id: string;
error_message: string;
error_code: string;
telco: string;
user_id: number;

user?: User;
telcoId?: Telco;
package?: Package;

constructor() {}
}

Service: smsmo.service.ts

// App import
import { Smsmo } from '../models/smsmo';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http-handle-error.service';
@Injectable({
  providedIn: 'root'
})

export class SmsmoService {

private readonly apiUrl = environment.apiUrl;
private smsmoUrl = this.apiUrl;
private handleError: HandleError;  

constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler ) {
  this.handleError = httpErrorHandler.createHandleError('SmsmoService');
}

/** GET smsmos from smsmos endpoint */
getSmsmos (page): Observable<Smsmo[]> {
return this.http.get<Smsmo[], page>(this.smsmoUrl + '/indexSmsmo')
.pipe(
  catchError(this.handleError('getSmsmos', []))
);
}

The question is, why am I having the red line error in service and how do I resolve it. I mean how do I integrate the page into my server.ts. See the diagram for detail.

Answer 1

In my opinion the variable page is the number of page you want from server side. It is not type/interface .

so you can't write it with return type of your request. you have to pass it with your server as permalink or query method. for eg

getSmsmos (page): Observable<Smsmo[]> {
return this.http.get<Smsmo[]>(this.smsmoUrl + '/' + page)
.pipe(
  catchError(this.handleError('getSmsmos', []))
);
}