Angular Async Data not rendering in template when using ngIf

Question

I think I am going blind today but I am trying to render some data that I derive from the URL params that is then passed to a http call. This is code in my Angular component:

export class AlbumDetailsComponent implements OnInit {

  activatedRoute = inject(ActivatedRoute);
  http = inject(HttpClient);

  album$: any;

  ngOnInit(): void {
    // let's get the url param
    this.album$ = this.activatedRoute.params.pipe(
      map(params => params['id']),
      switchMap(albumId => this.http.get(`/get-albums/${albumId}`)
      ));
  }
}

Now I try to render this on my template...

<div class="album-details" *ngIf="(album$ | async) as templateAlbum">
    <!-- artist -->
    <div>
      <div>Artist</div>
      <div> {{templateAlbum.artist}} </div>
    </div>
</div>

However this produces the following error:

error TS2571: Object is of type 'unknown'.

<div> {{templateAlbum.artist}} </div>

Also my IDE doesn't seem to like the use of *ngIf on the <div class="album-details" tag?

So I change the template HTML code to the following, but this still produces the same error:

<div class="album-details">
    <!-- artist -->
    <div>
      <div>Artist</div>
      <div> {{ (album$ | async).artist }} </div>
    </div>
</div>

However when I remove all the template HTML code and replace it with {{ album$ | async | json }} the correct data is rendered to the interface?

What I am doing wrong here? Are my types wrong (I am just using any here) or is my template logic wrong?

Sorry for such a silly question but I have been looking at this for a while.

** UPDATE **

When changing my definitions to album$!: Observable<any>; (notice I use the non null !) and then in my template I apply the following

<div class="album-details" *ngIf="(album$ | async) as album">
    <!-- artist -->
    <div>
      <div>Artist</div>
      <div> {{ album.artist}}</div>
    </div>
</div>

everything now seems to work? Why was I getting my original error?