Since now there is a means to retrieve data from the backend, there needs to be ways to display that data. There are three main pages that need to be created, which are the Tweets List page, the Tweets Add page, and the User Profile page. So, we shall generate those using the following command:

ng g c tweets-list

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

The tweets-list.component.ts file will look like the following after modifying the stub code:

import { Component, OnInit } from '@angular/core';
import { TweetsService } from '../shared/tweets/tweets.service';
import { AuthService } from '../auth.service'

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

  tweets: Array<any>;

  constructor(private tweetsService: TweetsService, private authService: AuthService) { }

  ngOnInit() {
    this.authService.checkCredentials();
    this.tweetsService.getAll().subscribe(data => {
      this.tweets = data;
    });
  }

}

TweetsListComponent will use an injected TweetsService to get all tweets for a particular user from the backend and store them in an array variable named tweets so that they can be used in the HTML to be rendered.

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

<mat-card>
  <mat-card-header>Tweets</mat-card-header>
  <mat-card-content>
    <mat-list>
      <mat-list-item *ngFor="let tweet of tweets">
        <a mat-list-avatar 
         href="/profile/{{tweet.tweetUser.screenName}}">
         <img mat-list-avatar src="{{tweet.tweetUser.profileImage}}"
         alt="{{tweet.tweetUser.profileImage}}"/></a>
        <h3 mat-line>{{tweet.content}}</h3>
      </mat-list-item>
    </mat-list>
  </mat-card-content>

  <button mat-fab color="primary" [routerLink]="['/tweets-
  add']">Tweet</button>
</mat-card>

The preceding source code uses mat-* elements to structure the layout of the Tweets List page and the mat-list-item element will use the tweets array from the TweetsListComponent class to display tweet content, a user profile image, and a link to the user profile. Also, it will have a button to redirect to the Tweets Add page, which will be explained later. This will act as the main page. Routing for this is also defined in the /src/app/app.module.ts file:

const appRoutes: Routes = [
  { path: '', redirectTo: '/tweets-list', pathMatch: 'full' },
  {
    path: 'tweets-list',
    component: TweetsListComponent
  }
  ...
];

@NgModule({
  ...
  imports: [
    ...
    RouterModule.forRoot(appRoutes)
  ],
  ...
})
export class AppModule { }