Here is the code I've been working on:
This is the component.ts page code:
import {Component, OnInit, NgModule, VERSION} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { UserService } from "../services/user.service";
import {Router, ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'app-all-users',
templateUrl: './all-users.component.html',
styleUrls: ['./all-users.component.css'],
providers: [ UserService ]
})
export class AllUsersComponent{
users; usersnew; limit; limitnew;
constructor(public userService: UserService, public router: Router, public route: ActivatedRoute) {
this.limit = "0";
this.limitnew = "0";
this.userService.getTestUsers(this.limit).subscribe( users => this.users = users);
}
LoadMore(){
this.limit = "12";
this.limitnew = +this.limitnew + +this.limit;
this.userService.getTestUsers(this.limitnew).subscribe( usersnew => this.usersnew = usersnew);
this.users = [...this.users , ...this.usersnew];
console.log(this.users);
}
}
Now, let's take a look at the html page:
<div class="row">
<div class="col-sm-3 *ngFor="let user of users ;let i = index ">
<img *ngIf="user.image == ''" src="http://localhost/assets/images/user.png" class="user_img">
</div>
</div>
<button (click)="LoadMore()"> Load More </button>
Lastly, the userService page code:
import { Component, Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map';
@Injectable()
export class UserService{
constructor(private http: Http) { this.http = http; }
getTestUsers(limitid): Observable<any> {
return this.http.get("http://localhost/AdminApp/api/get_all_user.php?id="+ limitid).map(res => res.json());
}
}
My query is regarding the behavior of the constructor in the component.ts page compared to the LoadMore function inside the userService.