Renderizar plantillas desde un componente padre con ng-content
<ng-content> es un elemento especial que acepta marcado o un fragmento de plantilla y controla cómo los componentes renderizan contenido. No renderiza un elemento DOM real.
Aquí hay un ejemplo de un componente BaseButton que acepta cualquier marcado de su padre.
// ./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';@Component({ selector: 'app-root', imports: [BaseButton], template: ` <button baseButton> Next <span class="icon arrow-right"></span> </button> `,})export class AppComponent {}Para más detalle, consulta la guía en profundidad de <ng-content> para otras formas en que puedes aprovechar este patrón.