Angular에 ViewChild라는 데코레이터가 있다.

이 데코레이터에 read 라는 옵션이 있는데 간단히 이 차이점을 확인해 본다.

  @ViewChild('main') mainView;
  @ViewChild('main', { read: ViewContainerRef }) mainViewContainerRef;
  @ViewChild('main', { read: ElementRef }) mainViewElementRef;


  ngAfterViewInit(): void {
    console.log(this.mainView, this.mainViewContainerRef, this.mainViewElementRef);
  }

console.log 결과

>> MainComponent {} ViewContainerRef_ {_view: {…}, _elDef: {…}, _data: {…}, _embeddedViews: Array(0)} ElementRef {nativeElement: main}

ViewChild read 옵션을 활용하여 상황에 맞게 사용할수 있겠다.