부모 컴포넌트에서 받은 템플릿 렌더링하기: `ng-content`

<ng-content> 은 마크업이나 템플릿 조각을 받아서 렌더링하는 특수 엘리먼트입니다. <ng-content> 자체가 DOM 엘리먼트로 렌더링되는 것은 아닙니다.

부모 컴포넌트에서 마크업을 받아 렌더링하는 BaseButton 컴포넌트를 예제로 봅시다.

      // ./base-button/base-button.component.tsimport { Component } from '@angular/core';@Component({  selector: 'button[baseButton]',  template: `      <ng-content />  `,})export class BaseButton {}

      // ./app.component.tsimport { Component } from '@angular/core';import { BaseButton } from './base-button/base-button.component.ts';@Component({  selector: 'app-root',  imports: [BaseButton],  template: `    <button baseButton>      Next <span class="icon arrow-right" />    </button>  `,})export class AppComponent {}

더 자세한 내용은 <ng-content> 심화 가이드 문서를 참고하세요.