Content projection as inversion of control

example.md

Before:

class Car {
    private _engine: Engine;
    private _radio: Radio;
    
    constructor () {
        this._engine = new Engine();
        this._radio = new Radio();
    }
}

const car = new Car(); // can't swap out the engine or radio

@Component({
    selector: 'car',
    template: `
        <engine></engine>
        <radio></radio>
    `
})
class CarComponent { }

<car></car>

After:

class Car {
    constructor (
        private _engine: Engine,
        private _radio: Radio
    ) { }
}

const electricMotor = new ElectricMotor();
const sickRadio = new SickRadio();
const car = new Car(electricMotor, sickRadio); // Yay, extensible.

@Component({
    selector: 'car',
    template: `
        <ng-content select="engine"></ng-content>
        <ng-content select="radio"></ng-content>
    `
})
class CarComponent { }

<car>
  <engine></engine>
  <radio></radio>
</car>