<file_sep>import { Component, Input, Output, EventEmitter } from '@angular/core';
import { User } from '../../models/user.model';

@Component({
  selector: 'ng-e-app-content',
  templateUrl: './app-content.component.html',
  styleUrls: ['./app-content.component.scss']
})
export class AppContentComponent {
  user: User = {
    firstName: 'Ahsan',
    lastName: 'Ayaz'
  };

  @Input()
  isLoggedIn = false;

  @Output()
  loginNotificator = new EventEmitter();

  /**
   * @author <NAME>
   * @desc Logs the user in
   */
  login() {
    this.setLogin(true);
  }

  /**
   * @author <NAME>
   * @desc Logs the user out
   */
  logout() {
    this.setLogin(false);
  }

  /**
   * @author <NAME>
   * @desc handle the internal and external status of login
   * @param value status to be set (representing logged or not)
   */
  setLogin(value: boolean) {
    this.isLoggedIn = value;
    this.loginNotificator.emit(value);
  }

}
<file_sep>import { Component } from '@angular/core';

@Component({
  selector: 'ng-e-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  logged: Boolean = false;

  /**
   * @author <NAME>
   * @desc handle the status of user
   * @param value status to be set (representing logged or not)
   */
  setLogin (logged) {
    this.logged = logged;
  }

}
<file_sep>import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { UsersListRoutingModule } from './users-list-routing.module';
import { ListComponent } from './list/list.component';
import { UsersService } from './users.service';
import { UserDetailComponent } from './user-detail/user-detail.component';

@NgModule({
  imports: [
    CommonModule,
    UsersListRoutingModule,
    HttpClientModule
  ],
  providers: [UsersService],
  declarations: [
    ListComponent,
    UserDetailComponent
  ]
})
export class UsersListModule { }
<file_sep>import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UsersService } from '../users.service';
import { randomuser } from '../../core/models/randomuser.model';


@Component({
  selector: 'ng-e-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  usersList: Array<randomuser.Result>;

  constructor(
    private usersService: UsersService,
    private router: Router
  ) { }

  ngOnInit() {
    this.usersService
      .getUsers()
      .subscribe((response: randomuser.Result[]) => {
        this.usersList = response;
      });
  }

  viewDetail(id: number) {
    this.router.navigate(['users-list/' + id]);
  }

  goBack() {
    this.router.navigate(['landing']);
  }
}
<file_sep>import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/map';
import { randomuser } from '../core/models/randomuser.model';

@Injectable()
export class UsersService {

  usersList;
  NRESULTS: Number = 20;
  ENDPOINT = {
    baseUrl: 'https://randomuser.me',
    relativeUrl: '/api',
    queryParams: {
      results: String(this.NRESULTS)
    }
  };

  constructor(private http: HttpClient) { }

  getUsers() {
    return this.usersList
      ? of(this.usersList)
      : this.http
          .get(
            this.ENDPOINT.baseUrl + this.ENDPOINT.relativeUrl,
            { params: this.ENDPOINT.queryParams }
          )
          .map((result: randomuser.RootObject) => {
            this.usersList = result.results;
            console.log('Service stored users list: ', this.usersList);
            return this.usersList;
          });
  }

  getUser(id: number = 0) {
    if (this.usersList) {
      return (id >= 0 && id < this.NRESULTS)
        ? of(this.usersList[id])
        : of(null);
    } else {
      return this.getUsers().map(() => this.usersList[id]);
    }
  }
}
