Filter users by like in the SPA


Add a new optional parameter to UserService.getUsers

getUsers(page?: any, itemsPerPage?: any, userParams?: any, likesParam?: string): Observable<PaginatedResult<User[]>> {
  if (likesParam === 'likers') {
    params = params.set('likers', 'true');
  if (likesParam === 'likees') {
    params = params.set('likees', 'true');


Create a new resolver lists.resolver.ts

export class ListsResolver implements Resolve<PaginatedResult<User[]>> {
  pageNumber = 1;
  pageSize = 5;
  likesParam: any;

  constructor(private router: Router, private userService: UserService, private alertify: AlertifyService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<PaginatedResult<User[]>> {
    return this.userService.getUsers(this.pageNumber, this.pageSize, null, this.likesParam).pipe(
        catchError(error => {
          this.alertify.error('Problem retrieving data');
          return empty();

Add this resolver to route.ts

  path: 'lists',
  component: ListsComponent,
  resolve: { users: ListsResolver }

Register the resolver in app.module.ts

providers: [
  // ...


Edit lists.component.ts

  selector: 'app-lists',
  templateUrl: './lists.component.html',
  styleUrls: ['./lists.component.css']
export class ListsComponent implements OnInit {
  users: User[];
  pagination: Pagination;
  likesParam: string;

    private route: ActivatedRoute,
    private userService: UserService,
    private alertify: AlertifyService
  ) {}

  ngOnInit() {> {
      this.users = data['users'].result;
      this.pagination = data['users'].pagination;
    this.likesParam = 'Likers';

  pageChanged(event: any): void {
    this.pagination.currentPage =;

  loadUsers() {
      .getUsers(this.pagination.currentPage, this.pagination.itemsPerPage, null, this.likesParam)
        result => {
          this.users = result.result;
          this.pagination = result.pagination;
        error => {

Add the markup in lists.component.html

<div class="text-center mt-3">
  <h2>{{likesParam === 'Likers' ? 'Members who like me' : 'Members who I\'ve Liked'}} : {{pagination.totalItems}}</h2>

<div class="container mt-3">

  <div class="row">
    <div class="btn-group">
      <button class="btn btn-primary" [(ngModel)]="likesParam" btnRadio="Likers" (click)="loadUsers()">Members who like me</button>
      <button class="btn btn-primary" [(ngModel)]="likesParam" btnRadio="Likees" (click)="loadUsers()">Members who I like</button>


  <div class="row">
    <div *ngFor="let user of users" class="col-sm-6 col-md-4 col-lg-4 col-xl-2">
      <app-member-card [user]="user"></app-member-card>

<div class="d-flex justify-content-center">
  <pagination [boundaryLinks]="true" [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [(ngModel)]="pagination.currentPage"
    (pageChanged)="pageChanged($event)" previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"></pagination>

Note that in the application API the Gender is automatically added if not specified in the UserParams. In the Members page we can filter for both genders and add a like to anyone. But in this page only likes received from the opposite gender are considered.