9.4: Displaying Followers in Followers Component

This component will be very similar to our MemberListComponent.

We'll call the getUsers() method from our UserService - but, this time we'll pass in query parameters to only return Followers or Followees.

We'll display paged results similarly, but instead of sorting and filtering filters - we'll just have a choice between Followers and Followees.

Updating UserService

First, we'll add a parameter for followParam:

getUsers(page?, itemsPerPage?, userParams?, followParam?): Observable<PaginatedResult<User[]>> {

Next, we'll add two conditionals to check the value of the followParam:

if (followParam === 'Followers') {
    params = params.append('Followers', 'true');
}

if (followParam === 'Followees') {
    params = params.append('Followees', 'true');
}

Add Followers Resolver

In the SPA/src/app/resolvers folder, add a new file called followers.resolver.ts.

This will be very similar to member-list.resolver.ts

We'll add another property called followParam and set a default value of "Followers".

We'll pass in a null value for userParams since we don't need to send any. Then we'll pass in our followParam.

@Injectable()
export class FollowersResolver implements Resolve<PaginatedResult<User[]>> {

    pageSize = 12;
    pageNumber = 1;
    followParam = 'Followers';

    constructor(
        private _userService: UserService,
        private _router: Router) {}

    resolve(route: ActivatedRouteSnapshot): Observable<PaginatedResult<User[]>> {
        return this._userService.getUsers(this.pageNumber, this.pageSize, null, this.followParam);
    }
}

In app.module.ts - import the resolver and add it to the providers array:

import { FollowersResolver } from './resolvers/followers.resolver';

providers: [
    //  ...
    FollowersResolver
  ],

Next, we'll add it to the routes.ts file:

{ path: 'followers', component: FollowersComponent, resolve: { users: FollowersResolver } },

Update FollowersComponent

Update the followers.component.ts file to the following:

export class FollowersComponent implements OnInit {
  users: User[];
  pagination: Pagination;
  followParam: string;

  constructor(private _userService: UserService,
              private _authService: AuthService,
              private _route: ActivatedRoute,
              private _alertify: AlertifyService) { }

  ngOnInit() {
    this._route.data.subscribe(data => {
      this.users = data['users'].result;
      this.pagination = data['users'].pagination;
    });
    this.followParam = 'Followers';
  }

  loadUsers() {
    this._userService.getUsers(this.pagination.currentPage, this.pagination.itemsPerPage, null, this.followParam)
      .subscribe((res: PaginatedResult<User[]>) => {
        this.users = res.result;
        this.pagination = res.pagination;
      }, error => {
        this._alertify.error(error);
      });
  }

  pageChanged(event: any) {
    this.pagination.currentPage = event.page;
    this.loadUsers();
  }

}

This is all very similar to what we've done before.

Update FollowersComponent Template

This will also be similar to the MemberListComponent:

<div class="container">

  <div class="row d-flex justify-content-center">
    <div class="btn-group mt-3" role="group">
        <button 
          type="button"
          btnRadio="Followers"
          [(ngModel)]="followParam"
          (click)="loadUsers()"
          class="btn btn-secondary">Following Me</button>
        <button 
          type="button"
          btnRadio="Followees"
          [(ngModel)]="followParam"
          (click)="loadUsers()"
          class="btn btn-secondary">I'm Following</button>
    </div>
  </div>

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

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

</div>

Finally, we'll copy the same styling over from the MemberListComponent to our followers.component.scss file:

#card {
    margin: 15px 0 15px 0;
}

It should work! Open the browser and test:

FollowingMe

ImFollowing