Как писать асинхронные js функций в html?

Для написания асинхронных функций в Angular можно использовать несколько подходов. Вот несколько из них:

1. Promise: Promise - это объект, представляющий результат или ошибку асинхронной операции. С помощью Promise можно организовать выполнение асинхронного кода и передать его результат back в html. Например, для получения данных из API можно использовать следующий код:

// В компоненте:
getData(): Promise<any> {
  return new Promise<any>((resolve, reject) => {
    this.http.get('https://api.example.com/data').subscribe(
      (response) => {
        resolve(response);
      },
      (error) => {
        reject(error);
      }
    );
  });
}

<!-- В шаблоне компонента -->
<div *ngIf="myData">
  {{ myData | json }}
</div>

<button (click)="getData().then(data => myData = data)">Get Data</button>

2. Async/await: Async/await - это новый синтаксис, который значительно упрощает асинхронное программирование. Он позволяет писать асинхронный код так, как будто он синхронный. В Angular можно использовать async/await следующим образом:

// В компоненте:
async getData() {
  try {
    this.myData = await this.http.get('https://api.example.com/data').toPromise();
  } catch (error) {
    console.error(error);
  }
}

<!-- В шаблоне компонента -->
<div *ngIf="myData">
  {{ myData | json }}
</div>

<button (click)="getData()">Get Data</button>

3. Observable: Observable - это поток данных, который может быть использован для асинхронных операций. Для использования Observable в html можно воспользоваться асинхронной пайпой async:

// В компоненте:
getData(): Observable<any> {
  return this.http.get('https://api.example.com/data');
}

<!-- В шаблоне компонента -->
<div *ngIf="getData() | async as myData">
  {{ myData | json }}
</div>

<button (click)="getData()">Get Data</button>

Все эти подходы позволяют обрабатывать асинхронный код в Angular и выводить результаты в html-шаблонах. Вы можете выбрать подход, который наиболее подходит для вашей ситуации и интегрировать его в ваш проект.