docs: add async component example (#171)

Author: timdeschryver

apps/example-app/app/examples/14-async-component.spec.ts

@@ -0,0 +1,16 @@
+import { fakeAsync, tick } from '@angular/core/testing';
+import { render, screen, fireEvent } from '@testing-library/angular';
+
+import { AsyncComponent } from './14-async-component';
+
+test('can use fakeAsync utilities', fakeAsync(async () => {
+  await render(AsyncComponent);
+
+  const load = await screen.findByRole('button', { name: /load/i });
+  fireEvent.click(load);
+
+  tick(10_000);
+
+  const hello = await screen.findByText('Hello world');
+  expect(hello).toBeInTheDocument();
+}));

apps/example-app/app/examples/14-async-component.ts

@@ -0,0 +1,27 @@
+import { ApplicationInitStatus, Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { delay, filter, mapTo } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-fixture',
+  template: `
+    <button (click)="load()">Load</button>
+    <div *ngIf="data$ | async as data">{{ data }}</div>
+  `,
+})
+export class AsyncComponent implements OnDestroy {
+  actions = new Subject<string>();
+  data$ = this.actions.pipe(
+    filter((x) => x === 'LOAD'),
+    mapTo('Hello world'),
+    delay(10_000),
+  );
+
+  load() {
+    this.actions.next('LOAD');
+  }
+
+  ngOnDestroy() {
+    this.actions.complete();
+  }
+}