Angular Template async 활용 / Observable 옵저버블 일반 타입 변환 예시

items$: Observable<DTO[]>;

// http 통신 결과를 바로 옵저버블로 받기
this.items$ = this.httpService.get<DTO[]>(
      `post/realated/${process.env['NX_PROJECT_ID']}?categoryId=${process.env['NX_VIDEO_ID']}`
    );

1. 컴포넌트 ts

 

<ng-container *ngIf="items$ | async as items">
    <section [slides]="items" />
  </ng-container>

2. 템플릿

3. | async : async 파이프 사용 시 observable 타입에서 일반 타입으로 자동으로 변환됩니다.

 

 

또는

slides$!: Observable<IPostDTO[]>;
 
 
constructor(private readonly httpService: HttpService) {
 this.slides$ = this.httpService.get<IPostDTO[]>(
      `post/realated/${process.env['NX_PROJECT_ID']}?categoryId=${process.env['NX_VIDEO_ID']}`
    );
  }

1.  부모 컴포넌트에서 자식 컴포넌트로 주입하지 않고 자식 컴포넌트가 독립적으로 데이터를 옵저버블 처리하는 경우 컴포넌트 생성자 시점에서 통신 후 데이터를 할당합니다.

 

<section
  *ngIf="slides$ | async as slides"
>
	...
</section>

2. 자식 템플릿 내에 최상위 태그에 ngIf 를 걸어 셋팅합니다.