src/app/common/components/avatar/avatar.ts

 import { Component, EventEmitter } from '@angular/core';
-
-import { Client } from '../../../services/api';
+import { UserAvatarService } from '../../services/user-avatar.service';
+import { of, Observable } from 'rxjs';
 
 @Component({
   selector: 'minds-avatar',
@@ -14,17 +14,28 @@ import { Client } from '../../../services/api';
   ],
   outputs: ['added'],
   template: `
-    <div class="minds-avatar" [style.background-image]="'url(' + src + ')'">
+    <div
+      class="minds-avatar"
+      [ngStyle]="{ 'background-image': 'url(' + (getSrc() | async) + ')' }"
+    >
       <img
-        *ngIf="!src"
+        *ngIf="!(userAvatarService.src$ | async)"
         src="{{ minds.cdn_assets_url }}assets/avatars/blue/default-large.png"
         class="mdl-shadow--4dp"
       />
       <div *ngIf="editing" class="overlay">
         <i class="material-icons">{{ icon }}</i>
         <ng-container *ngIf="showPrompt">
-          <span *ngIf="src" i18n="@@COMMON__AVATAR__CHANGE">Change avatar</span>
-          <span *ngIf="!src" i18n="@@COMMON__AVATAR__ADD">Add an avatar</span>
+          <span
+            *ngIf="userAvatarService.src$ | async"
+            i18n="@@COMMON__AVATAR__CHANGE"
+            >Change avatar</span
+          >
+          <span
+            *ngIf="!(userAvatarService.src$ | async)"
+            i18n="@@COMMON__AVATAR__ADD"
+            >Add an avatar</span
+          >
         </ng-container>
       </div>
       <input *ngIf="editing" type="file" #file (change)="add($event)" />
@@ -40,18 +51,21 @@ export class MindsAvatar {
   index: number = 0;
   icon: string = 'camera';
   showPrompt: boolean = true;
-
   file: any;
   added: EventEmitter<any> = new EventEmitter();
 
+  constructor(public userAvatarService: UserAvatarService) {}
+
   set _object(value: any) {
     if (!value) return;
-
     value.icontime = value.icontime ? value.icontime : '';
     this.object = value;
-    this.src = `${this.minds.cdn_url}fs/v1/avatars/${this.object.guid}/large/${this.object.icontime}`;
-    if (this.object.type === 'user')
+
+    if (this.object.type !== 'user') {
+      this.src = `${this.minds.cdn_url}fs/v1/avatars/${this.object.guid}/large/${this.object.icontime}`;
+    } else if (this.object.guid !== this.minds.user.guid) {
       this.src = `${this.minds.cdn_url}icon/${this.object.guid}/large/${this.object.icontime}`;
+    }
   }
 
   set _src(value: any) {
@@ -63,6 +77,10 @@ export class MindsAvatar {
     if (!this.editing && this.file) this.done();
   }
 
+  /**
+   * New avatar added.
+   * @param e - the element.
+   */
   add(e) {
     if (!this.editing) return;
 
@@ -78,6 +96,9 @@ export class MindsAvatar {
         typeof reader.result === 'string'
           ? reader.result
           : reader.result.toString();
+      if (this.object.type === 'user' && this.isOwnerAvatar()) {
+        this.userAvatarService.src$.next(this.src);
+      }
     };
     reader.readAsDataURL(this.file);
 
@@ -87,9 +108,28 @@ export class MindsAvatar {
     if (this.waitForDoneSignal !== true) this.done();
   }
 
+  /**
+   * Called upon being done.
+   */
   done() {
     console.log('sending done');
     this.added.next(this.file);
     this.file = null;
   }
+
+  /**
+   * Gets the src of the image
+   * @returns { Observables<string> } the src for the image.
+   */
+  getSrc(): Observable<string> {
+    return this.isOwnerAvatar() ? this.userAvatarService.src$ : of(this.src);
+  }
+
+  /**
+   * Determined whether this is a users avatar.
+   * @returns true if the object guid matches the currently logged in user guid
+   */
+  isOwnerAvatar(): boolean {
+    return this.object.guid === this.minds.user.guid;
+  }
 }

src/app/common/services/user-avatar.service.ts

+/**
+ * @author Ben Hayward
+ * @desc Singleton service used to store the current user avatar as a BehaviorSubject.
+ */
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { Session } from '../../services/session';
+import { MindsUser } from '../../interfaces/entities';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserAvatarService {
+  private minds = window.Minds;
+  private user: MindsUser;
+  public src$: BehaviorSubject<string> = new BehaviorSubject<string>('');
+  public loggedIn$: Subscription;
+
+  constructor(public session: Session) {
+    this.init();
+
+    // Subscribe to loggedIn$ and on login, update src$.
+    if (this.session.loggedinEmitter) {
+      this.loggedIn$ = this.session.loggedinEmitter.subscribe(is => {
+        if (is) {
+          this.src$.next(this.getSrc());
+        }
+      });
+    }
+  }
+
+  /**
+   * Sets the current user and avatar src.
+   */
+  public init(): void {
+    this.user = this.session.getLoggedInUser();
+    this.src$.next(this.getSrc());
+  }
+
+  /**
+   * Gets the Src string using the global minds object and the held user object.
+   */
+  public getSrc(): string {
+    return `${this.minds.cdn_url}icon/${this.user.guid}/large/${this.user.icontime}`;
+  }
+}

src/app/modules/forms/login/login.ts

@@ -3,6 +3,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 import { Client } from '../../../services/api';
 import { Session } from '../../../services/session';
+import { UserAvatarService } from '../../../common/services/user-avatar.service';
 
 @Component({
   moduleId: module.id,
@@ -31,7 +32,8 @@ export class LoginForm {
     public session: Session,
     public client: Client,
     fb: FormBuilder,
-    private zone: NgZone
+    private zone: NgZone,
+    private userAvatarService: UserAvatarService
   ) {
     this.form = fb.group({
       username: ['', Validators.required],
@@ -65,6 +67,7 @@ export class LoginForm {
         // TODO: [emi/sprint/bison] Find a way to reset controls. Old implementation throws Exception;
         this.inProgress = false;
         this.session.login(data.user);
+        this.userAvatarService.init();
         this.done.next(data.user);
       })
       .catch(e => {
@@ -102,6 +105,7 @@ export class LoginForm {
       })
       .then((data: any) => {
         this.session.login(data.user);
+        this.userAvatarService.init();
         this.done.next(data.user);
       })
       .catch(e => {