content-projection-reusable.component.tsx

// imagine we have a huge component that is highly customizable
// we could add a lot of inputs as options to it
<app-editor 
  [undoRedo]="true" 
  [copyPaste]="true" 
  [textFormatting]="true"/>

// or, we could use the power of content projection
// to both ensure design consistency and higher reusability

@Component({
    selector: 'app-copy-and-paste',
    template: `
        <button>Copy</button>
        <button>Cut</button>
        <button>Paste</button>
    `,
})
export class CopyAndPasteComponent {}

@Component({
    selector: 'app-undo-redo',
    template: `
        <button>Undo</button>
        <button>Redo</button>
    `,
})
export class UndoRedoComponent {}

@Component({
    selector: 'app-text-format',
    template: `
        <button>Bold</button>
        <button>Italic</button>
        <button>Underline</button>
    `,
})
export class TextFormatComponent {}

@Component({
    selector: 'app-editor',
    template: `
    <div class="editor-controls">
        <ng-content select="app-copy-and-paste"/>
        <ng-content select="app-undo-redo"/>
        <ng-content select="app-text-format"/>
    </div>
    <div class="editor-container">
        <textarea></textarea>
    </div>
    `,
})
export class EditorComponent {}

// then, in any component template, use the features you need:
<app-editor>
  <app-undo-redo/>
  <app-copy-and-paste/>
</app-editor>