Angular RxJs Observable works as string but not as interface or class

Question

My view does not get updated from Observable<class> but gets updated from Observable<string>.

ts file: status.component.ts

stat$: Observable<string>;

  constructor() {
    this.stat$ = new Observable(o => o.next('This is status text');
  }

template file: status.component.html

<span class="status">{{ stat$ | async }}</span>

I get the desired result in browser showing:

This is status text

So far so good, HOWEVER:

Here is my (newbie) problem when trying to use an interface or class instead of plain string - such as this:

ts file: status.model.ts

export interface StatusStruct {
    id?: number;
    counter?: number;
    timestamp?: string;
    isCompleted?: boolean;
    isError?: boolean;
    statusText?: string;
}

file: status.component.ts

import { StatusStruct } from './status.model';

stSt: StatusStruct;
stat$: Observable<StatusStruct>;

  constructor() {

    this.stSt = {
      id: 1,
      counter: 1,
      isCompleted: false,
      statusText: 'This is status text'
    };

    this.stat$ = new Observable(o => o.next(this.stSt);
  }

and in my template file: status.component.html

<span class="status">{{ stat$.statusText | async }}</span>

Would you please explain why the 'this.stat$' is not updated by: 'this.stSt' and does not show in view/browser? It compiles fine and the browser debugger shows no exceptions. Thank you.