3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 12

Styling and Refinements

Finishing up


Styling and Refinements

We just have a few things to finish up in this lesson to polish off the application, these are:

  • Supplying the active user as an input to the message list component so we can provide different styles for the users own messages
  • The ability to log out
  • General styling

Let’s get into it!

Active User Input

Add the following input to the MessageListComponent:

@Input() activeUser!: User;

NOTE: The User type should be imported from here:

import { User } from '@angular/fire/auth';

Modify the ion-avatar in the template to reflect the following:

          [slot]="message.author === activeUser.email ? 'start' : 'end'"

Now we are using the activeUser value to determine the slot position for the avatar. If the currently authenticated user matches the author of the message we will use the start slot, otherwise we will use the end slot.

Log Out Functionality

Add the following effect to the HomeStore:

  logout = this.effect(($) =>
      switchMap(() =>
            () => this.navCtrl.navigateRoot('/login'),
            (err) => console.log(err)

Modify the header in the HomeComponent to reflect the following:

      <ion-header class="ion-no-border">
        <ion-toolbar color="primary">
            <img src="assets/images/logo.png" />
          <ion-buttons slot="start">
            <ion-button (click)="store.logout()">
              <ion-icon name="log-out-outline" slot="icon-only"></ion-icon>

General Styling

Now we have just a few final style configurations to make.

Add the following styles to the HomeComponent:

      ion-content {
        --ion-background-color: var(--ion-color-primary);

      ion-title img {
        max-height: 39px;
        margin-top: 9px;
        filter: drop-shadow(2px 4px 6px var(--ion-color-primary-shade));

Add the following styles to src/global.scss:


Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).