Angular ng-content

ng-content는 Angular에서 컴포넌트 간의 콘텐츠 전달을 위해 사용되는 디렉티브입니다. ng-content를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 콘텐츠를 전달할 수 있습니다. 자식 컴포넌트에서는 ng-content를 사용하여 전달된 콘텐츠를 원하는 위치에 렌더링할 수 있습니다.

다음은 ng-content의 사용법을 설명하는 예시 코드입니다:

<!-- parent.component.html -->
<div>
  <h1>Welcome to the Parent Component</h1>
  <ng-content></ng-content>
</div>

<!-- child.component.html -->
<p>This is the content of the child component.</p>

위의 코드에서 ParentComponent는 ng-content를 포함하는 부모 컴포넌트이고, ChildComponent는 자식 컴포넌트입니다.

ParentComponent의 템플릿에서 ng-content 디렉티브를 사용하고 있습니다. 이는 ParentComponent가 자식 컴포넌트의 콘텐츠를 받아서 렌더링할 위치를 지정하는 역할을 합니다.

ChildComponent의 템플릿은 단순히 하나의 문단을 포함하고 있습니다.

이제 ParentComponent를 사용하여 ChildComponent의 콘텐츠를 전달하고 렌더링하는 방법을 보여주는 코드입니다:

<!-- app.component.html -->
<app-parent>
  <app-child></app-child>
</app-parent>

위의 코드에서 AppComponent는 ParentComponent와 ChildComponent를 사용하고 있습니다. ChildComponent의 인스턴스를 ParentComponent의 태그로 감싸고 있습니다.

실행 결과로는 다음과 같이 렌더링됩니다:

<div>
  <h1>Welcome to the Parent Component</h1>
  <p>This is the content of the child component.</p>
</div>

ParentComponent의 ng-content 디렉티브는 ChildComponent의 콘텐츠를 받아서 <ng-content></ng-content> 태그로 렌더링합니다. 이로써 부모 컴포넌트에서 자식 컴포넌트로 콘텐츠를 전달하고 렌더링할 수 있습니다.

이와 같이 ng-content를 사용하여 부모 컴포넌트와 자식 컴포넌트 간에 콘텐츠를 전달할 수 있으며, 유연한 컴포넌트 구조를 구성할 수 있

습니다.