Member detail

User service

Open user.service.ts and add a method to get a single User.

getUser(id: number): Observable<User> {
  return this.http
    .get<User>(this.baseUrl + id)

Member detail component

Create a new component members/member-detail. When we create a component in a sub folder the angular extension doesn’t add it reference, so open app.module.ts and add it.

Add a property user, add DI in the constructor for HttpClient, AlertifyService and ActivatedRoute. Add a method loadUser.

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

ngOnInit() {

loadUser(id: number) {
    user => {
      this.user = user;
    error => {

Open member-detail.component.html and add a simple property binding.



Open routes.ts and add a route with a parameter to MemberDetailComponent.

children: [
  { path: 'members', component: MemberListComponent },
  { path: 'members/:id',  component: MemberDetailComponent },
  { path: 'lists', component: ListsComponent },
  { path: 'messages', component: MessagesComponent }

Load user from route

Open member-card.component.html and add a a-routerlink

<button class="btn btn-primary btn-responsive" [routerLink]="['/members/',]">
  <i class="fa fa-user"></i>

Member detail left column

Open member-detail.component.html and replace all the content with a two column grid layout. In the left part we have a profile picture and some details about the user.

<div class="container">
  <div class="row">
  <div class="row">
    <div class="col-sm-4">
      <div class="panel panel-default">
        <img class="thumbnail profile-image" src="{{user?.profilePhotoUrl}}" alt="{{user?.knownAs}}">
        <div class="panel-body">
            <p>{{user?.city}}, {{user?.country}}</p>
            <strong>Last active:</strong>
            <strong>Member since:</strong>
          <div class="panel-footer">
            <div class="btn-group-justified">
              <div class="btn-group">
                <button class="btn btn-primary">Like</button>
              <div class="btn-group">
                <button class="btn btn-success">Message</button>
    <div class="col-sm-8"></div>

Add some styles to member-detail.component.css

.profile-image {
  margin: 25px;
  width: 85%;
  height: 85%;

.panel-body {
    padding: 0 25px;

.panel-footer {
    padding: 10 15px;
    background-color: #fff;
    border-top: none;

.btn-group-justified>.btn-group .btn {
    width: 95%

Member detail right column

In member-detail.component.html add into col-sm-8 a tabbed panel using NGX bootstrap. To do so open app.module.ts and import TabModule.


Inside the col-sm-8 add the markup for the tabs. Note the class members-table, we will use this class inside the global css.

<div class="col-sm-8">
  <div class="tab-panel">
    <tabset class="member-tabset">
      <tab heading="About {{user?.knownAs}}">
        <h4>Looking for</h4>
      <tab heading="Interests">
      <tab heading="Photos">
        <p>Photos will go here</p>
      <tab heading="Messages">
        <p>Messages will go here</p>

Open styles.css and add the styles.

.tab-panel {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;

.nav-tabs >,
.member-tabset > .nav-tabs > li:hover {
  border-bottom: 4px solid #e5f0fc;

.member-tabset > .nav-tabs > > a,
.member-tabset > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;

.member-tabset > .nav-tabs > > a > i,
.member-tabset > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;

.member-tabset > .nav-tabs > .dropdown-menu,
.member-tabset > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;

.member-tabset > .nav-tabs > {
  border-bottom: 4px solid #1a242f;
  position: relative;

.member-tabset > .nav-tabs > > a {
  border: 0 !important;
  color: #333333;

.member-tabset > .nav-tabs > > a > i {
  color: #404040;

.member-tabset > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;