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

// ./app.tsimport {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 {}

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