I need to display 10 items each time the button is clicked.
Below is the code snippet for the services:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
@Injectable({
providedIn: 'root'
})
export class StudentDataService {
url = "https://dummyjson.com/users?limit=10";
// Constructor / Instance
constructor(private http: HttpClient) { }
getdata(){
return this.http.get(this.url)
}
}
Here is the HTML/Bootstrap Code:
There is a load more button at the bottom which should display 10 more items every time it is clicked.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Age</th>
<th scope="col">Gender</th>
<th scope="col">User Detail</th>
<th scope="col">Add To Favorite</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of newdata.users">
<td>{{ user?.id }}</td>
<td>{{ user?.firstName }}</td>
<td>{{ user?.lastName }}</td>
<td>{{ user?.age }}</td>
<td>{{ user?.gender }}</td>
<td>
<button type="button" class="btn" (click)="UserClicked(user)">
See Details
</button>
</td>
<td (click)="moveToFavorite(user)">
<button class="btn-fav">Add To Favorite</button>
</td>
</tr>
</tbody>
</table>
<div class="btn-div">
<button class="load-more ">Load More</button>
</div>