Render templates from a parent component with `ng-content`

<ng-content> is a special element that accepts markup or a template fragment and controls how components render content. It does not render a real DOM element.

Here is an example of a BaseButton component that accepts any markup from its parent.

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

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

For more detail, check out the <ng-content> in-depth guide for other ways you can leverage this pattern.