user-page.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { User } from '../models/user';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-user-page',
  templateUrl: './user-page.component.html',
  styleUrls: ['./user-page.component.css']
})
export class UserPageComponent implements OnInit {

  user = new User;
  userId:number = null;
  subscriptionUserId;
  subscriptionUser;

  constructor(private userService:UserService, private route: ActivatedRoute) {
    this.subscriptionUserId = this.route.paramMap.subscribe((params : ParamMap)=> {
      this.userId = parseInt(params.get('userId'));
    });
  }

  ngOnInit() {

    this.subscriptionUser = this.userService.getUser(this.userId).subscribe( data => {

      this.user.firstName = data[0].firstname;
      this.user.lastName = data[0].lastname;
      this.user.username = data[0].username;

    }, error => {
      console.error(error);
    })
  }

  ngOnDestroy(){
    this.subscriptionUserId.unsubscribe();
    this.subscriptionUser.unsubscribe();
  }
}