title: Angular Cannot read property 'id' of undefined
body: <p>I am getting a list of users from a rest.
  I need to list these users in a datatable(ng-prime).
  If you click on a row it should get you to the desired route
  <strong>([hostname]/users/edit/[userId]</strong> which works fine!</p>
  
  <p>However if i refresh the page i got the error above.
  I'd like to understand why is it happening.</p>
  
  <p><strong>user-management.service.ts:</strong></p>
  
  <pre><code>// imports are here//
  @Injectable({
    providedIn: 'root'
  })
  export class UserManagementService {
  
    selectedUser: {};
    private usersList: UserListDTO[] = [];
  
    constructor(private userResoService: UserResourceService) { }
  
    getUsers() {
      this.userResoService.findPrivilegedUsersUsingGET().subscribe(resp =&gt; {
        resp.forEach(user =&gt; this.usersList.push(user));
      });
    }
  
    getUsersList(): UserListDTO[] {
      return this.usersList;
    }
  }
  </code></pre>
  
  <p><strong>user-list.component.ts:</strong></p>
  
  <pre><code>export class UsersListComponent implements OnInit {
  
    cols: any[];
    listOfUsers = [];
    constructor(private userService: UserManagementService,
      private router: Router,
      private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.userService.getUsers();
      this.listOfUsers = this.userService.getUsersList();
      this.cols = [
        { field: 'firstName', header: 'First Name' },
        { field: 'lastName', header: 'Last Name' },
        { field: 'email', header: 'email' },
        { field: 'status', header: 'Status' }
      ];
    }
  
    private navigateToUserEdit() {
      const id = this.userService.selectedUser['id'];
      this.router.navigate(['edit', id], { relativeTo: this.route });
    }
  
    onRowSelect(event) {
      this.userService.selectedUser = event['data'];
      this.navigateToUserEdit();
    }
  
    deleteUser(user) {
      this.userService.selectedUser = user;
    }
  }
  </code></pre>
  
  <p><strong>edit-user.component.ts:</strong></p>
  
  <pre><code>export class EditUserComponent implements OnInit {
  
    constructor(private userService: UserManagementService) { }
  
    userToEdit: {};
    ngOnInit() {
      this.userToEdit = this.userService.selectedUser;
    }
  }
  </code></pre>
  
  <p><strong>edit-user.component.html:</strong></p>
  
  <pre><code>&lt;p&gt;
    {{userToEdit['id']}}
  &lt;/p&gt;
  </code></pre>
  
  <p>I am getting the error at the last file. I am thinking maybe it's not existing because of some lifecycle hooks, but then how can i work my way around this issue?
  Enlighten me people of SO please.</p>
  
  <p><strong><em>EDIT!:</em></strong>
  Okay so! If I check the user Obj after I navigated it's fine but if I refresh the page <strong>userToEdit = undefined</strong>. How can I get that Obj back?</p>
  
  <p>Or what should I do to have it? Please don't tell me to use localstorage. ty</p>