To generate the User Profile page, we use the following code:

ng g c user-profile

This will generate the user-profile.component.css, user-profile.component.html, user-profile.component.spec.ts, and user-profile.component.ts files under the /src/app/user-profile directory.

user-profile.component.ts will look like the following after modifying the stub code:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { UsersService } from '../shared/users/users.service';
import { NgForm } from '@angular/forms';

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

  subscription: Subscription;

  user: any;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private usersService: UsersService,
              private authService: AuthService) { }

  ngOnInit() {
    this.authService.checkCredentials();
    this.subscription = this.route.params.subscribe(params => {
      const screenName = params['screenName'];
      this.usersService.getByScreenName(screenName).subscribe(data => {
        console.log(data);
        this.user = data;
      });
    });
  }

  follow(userId) {
    this.usersService.follow(userId).subscribe(data => {
      console.log(data);
    }, err => console.log("Error "+err));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

UserProfileComponent will use an injected UserService to follow a user by submitting to the user ID of a logged in user. 

tweets-add.component.html will look like the following after modifying the stub code:

<mat-list>
  <h2>{{user.screenName}}</h2>
  <mat-divider></mat-divider>
  <img mat-list-avatar src="{{user.profileImage}}" alt="{{user.profileImage}}" width="200" height="200"/>
  <mat-divider></mat-divider>
  {{user.bio}}
  <mat-divider></mat-divider>
  <form #followForm="ngForm" (ngSubmit)="follow(user.userId)">
    <button mat-raised-button color="primary" type="submit">Follow</button>
  </form>
</mat-list>

The preceding source code uses mat-* elements to structure the layout of the User Profile page. It also has a ngForm, which uses the UserProfileComponent.save method to follow a user in the backend by invoking the API.