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

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

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

base-button/base-button.ts

import {Component} from '@angular/core';

@Component({
  selector: 'button[baseButton]',
  template: `<ng-content />`,
})
export class BaseButton {}

app.ts

import {Component} from '@angular/core';
import {BaseButton} from './base-button';

@Component({
  selector: 'app-root',
  imports: [BaseButton],
  template: `<button baseButton>Next <span class="icon arrow-right"></span></button>`,
})
export class App {}

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