Angular async pipe loading page forever when using getter in component

Question

I have created standalone component.

import { AsyncPipe, CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-cnn',
  standalone: true,
  imports: [CommonModule, FormsModule, AsyncPipe],
  templateUrl: './cnn.component.html',
  styleUrl: './cnn.component.css',
})
export class CnnComponent implements OnInit {
  get outputImage(): Promise<string> {
    return Promise.resolve('https://upload.wikimedia.org/wikipedia/commons/4/4f/Extend_Edge-Handling.png');
  }

  constructor() {}

  ngOnInit(): void {}
}

<div class="container">
  <div class="output-section">
    <img
      *ngIf="outputImage | async as imageSrc"
      [src]="imageSrc"
      class="preview-image"
    />
  </div>
</div>

I am rendering HTML like this hoping to see image, but the page is forever loading even curl is not giving response as anything.

It is also showing same behaviour when i used async method instead and called like this in HTML

<img
  *ngIf="outputImage() | async as imageSrc"
  [src]="imageSrc"
  class="preview-image"
/>