Observables & HTTP

Preview — 3 of 10 questions

Which of the following best describes an RxJS Observable?

javascript

import { Observable } from 'rxjs';

const counter$ = new Observable<number>(subscriber => {
  let i = 0;
  const id = setInterval(() => subscriber.next(i++), 1000);

  // Teardown logic — called when unsubscribed
  return () => clearInterval(id);
});

// Nothing happens until we subscribe:
const sub = counter$.subscribe(value => console.log(value));
// 0, 1, 2, 3...

// Stop receiving values:
sub.unsubscribe();

AA Promise that can emit multiple values

BA lazy data producer that emits zero or more values over time, to which consumers subscribe

CA synchronous array of values with functional methods

DA class that wraps a single value and notifies listeners on change

What are the three callbacks accepted by subscribe()?

javascript

import { of, throwError } from 'rxjs';

of(1, 2, 3).subscribe({
  next: value => console.log('Value:', value),
  error: err => console.error('Error:', err),
  complete: () => console.log('Done!'),
});
// Value: 1 → Value: 2 → Value: 3 → Done!

throwError(() => new Error('Oops!')).subscribe({
  next: v => console.log(v),      // never called
  error: err => console.error(err), // 'Error: Oops!'
  complete: () => console.log('done'), // never called
});

Anext, error, complete

BonStart, onData, onEnd

Cresolve, reject, finally

Demit, catch, done

What does the async pipe do in an Angular template?

javascript

@Component({
  selector: 'app-users',
  template: `
    @if (users$ | async; as users) {
      @for (user of users; track user.id) {
        <p>{{ user.name }}</p>
      }
    } @else {
      <p>Loading...</p>
    }
  `,
  standalone: true,
  imports: [AsyncPipe],
})
export class UsersComponent {
  users$ = this.userService.getUsers();  // Observable<User[]>

  constructor(private userService: UserService) {}
  // No ngOnDestroy needed — async pipe handles unsubscription
}

AIt makes the template expression execute asynchronously in a Web Worker

BIt delays template rendering by one tick to avoid change detection issues

CIt subscribes to an Observable or Promise and returns the latest emitted value, automatically unsubscribing when the component is destroyed

DIt caches the result of a Promise and replays it to new subscribers

Answer all 10 questions (7 more), see explanations for every answer, and track your score.