라떼군 이야기

import { Component, input, computed } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { of, delay } from 'rxjs';

@Component({
  selector: 'app-chart',
  template: `
    <!-- resource.value()로 데이터에 접근 -->
    {{ resource.value() }}
    
    <!-- 로딩 상태와 에러 상태를 기본적으로 제공 -->
    @if(resource.isLoading()) { Loading... }
    @if(resource.error(); as error) { {{ error }} }
  `,
})
export class ChartComponent {
  // 1. 입력 시그널 정의
  dataSeriesId = input.required<string>();
  fromDate = input.required<Date>();
  toDate = input.required<Date>();

  // 2. 입력 시그널들을 하나의 파라미터 객체로 묶는 computed 시그널 생성
  params = computed(() => ({
    id: this.dataSeriesId(),
    from: this.fromDate(),
    to: this.toDate(),
  }));

  // 3. rxResource를 사용하여 params가 변경될 때마다 fetchData 호출
  resource = rxResource({
    params: this.params,
    stream: ({ params }) => this.fetchData(params),
  });

  // 가상의 데이터 패칭 함수 (실제로는 HttpClient 사용)
  private fetchData({ id, from, to }: { id: string; from: Date; to: Date }) {
    return of(`Example data for id [${id}] from [${from}] to [${to}]`).pipe(
      delay(1000)
    );
  }
}

import { Component, input, computed } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { switchMap, of, delay } from 'rxjs';

@Component({
  selector: 'app-chart',
  standalone: true,
  template: ` {{ data() }} `,
})
export class ChartComponent {
  dataSeriesId = input.required<string>();
  fromDate = input.required<Date>();
  toDate = input.required<Date>();

  params = computed(() => ({
    id: this.dataSeriesId(),
    from: this.fromDate(),
    to: this.toDate(),
  }));

  // 1. params 시그널을 Observable로 변환
  // 2. switchMap을 통해 이전 요청을 취소하고 새 요청 실행
  // 3. 결과를 다시 시그널로 변환하여 템플릿에서 사용
  data = toSignal(
    toObservable(this.params).pipe(
      switchMap((params) => this.fetchData(params))
    )
  );

  private fetchData({ id, from, to }: { id: string; from: Date; to: Date }) {
    return of(`Example data for id [${id}] from [${from}] to [${to}]`).pipe(
      delay(1000)
    );
  }
}

import { Component, input } from '@angular/core';
import { derivedAsync } from 'ngxtension/derived-async';
import { of, delay } from 'rxjs';

@Component({
  selector: 'app-chart',
  standalone: true,
  template: ` {{ data() }} `,
})
export class ChartComponent {
  dataSeriesId = input.required<string>();
  fromDate = input.required<Date>();
  toDate = input.required<Date>();

  // 입력 시그널의 값을 읽어 바로 비동기 함수로 전달
  data = derivedAsync(() => 
    this.fetchData(this.dataSeriesId(), this.fromDate(), this.toDate())
  );

  private fetchData(id: string, from: Date, to: Date) {
    return of(`Example data for id [${id}] from [${from}] to [${to}]`).pipe(
      delay(1000)
    );
  }
}