Creating the profile UI

Let's build the profile UI after we've implemented the component's methods:

1. Start by adding the following HTML markup to the users/components/profile/profile.component.html file:

   <mat-card class="profile-cover-card">
   <mat-card-content *ngIf="profileUser">
     <div class="profile-cover" [ngStyle]="
       {'background-image': profileUser.coverImage }">
     </div>
     <img class="profile-image" src="{{ profileUser.image 
       }}">
   </mat-card-content>
   </mat-card>

To display the profile cover and image, we use a Material Card component. We use the ngStyle directive to set the CSS background-image property to the URL of the profileUser cover photo, and we show the user's photo via interpolation using the element's src attribute.

2. Just below the previous...