동적 컴포넌트

이 단원에서는 유연한 애플리케이션을 만들기 위해 Angular에서 컴포넌트를 동적으로 불러오는 방법을 배웁니다.

동적 컴포넌트란 무엇인가요?

동적 컴포넌트는 템플릿에 직접 선언하는 대신 런타임에 뷰에 로드됩니다.

동적 컴포넌트를 사용하는 이유

• 유연한 UI 렌더링
• 조건에 따라 컴포넌트 표시
• 동적 대시보드나 모달 만들기

자리 표시자 만들기

<ng-container>를 자리 표시자로 사용하여 동적 컴포넌트를 로드하세요:

<ng-container #dynamicContainer></ng-container>

ViewChild 사용하기

컴포넌트 클래스에서 @ViewChild를 사용하여 컨테이너에 액세스하세요:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

컴포넌트 동적으로 로드하기

컴포넌트 팩토리 확인자를 사용하여 컴포넌트를 만들고 삽입하세요:

const componentRef = this.container.createComponent(MyDynamicComponent);

동적 컴포넌트에 데이터 전달하기

입력을 사용하여 동적으로 만든 컴포넌트에 데이터를 전달하세요:

componentRef.instance.data = 'Hello Dynamic';

동적 컴포넌트 제거하기

DOM에서 동적 컴포넌트를 쉽게 제거할 수 있습니다:

this.container.clear();

요약

이제 Angular에서 컴포넌트를 동적으로 만들고 관리하며 제거하는 방법을 알고 있습니다. 정말 잘하셨습니다!