app.component.ts

import {Component} from "@angular/core";
@Component({
    selector: 'my-app',
    template: `
        Hello {{ name }}
        <hr/>
        <squared-value [value]="4"></squared-value>
        <cubed-value [value]="4"></cubed-value>
        <quadrupal-value [value]="4"></quadrupal-value>
        <hr>
        <simple-1-value></simple-1-value>
        <simple-2-value></simple-2-value>
        <simple-3-value></simple-3-value>
        <simple-4-value></simple-4-value>
        <simple-5-value></simple-5-value>
        <simple-6-value></simple-6-value>
    `
})
export class AppComponent {
    name: string = "Sean";
    constructor() {
    }
}

boot.ts

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {enableProdMode} from "@angular/core";
import {AppModule} from "./app.module";
declare var process;
if (process.env.ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
// app.module.ts
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
// application
import {AppComponent} from "./app.component";
import {SquareComponent} from "./components/square.component";
import {CubeComponent} from "./components/cube.component";
import {QuadComponent} from "./components/quad.component";
@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent,
        SquareComponent,
        CubeComponent,
        QuadComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

cube.component.ts

import {Component, Input} from '@angular/core';
@Component({
    selector: 'cubed-value',
    template: `{{valueCubed()}}`
})
export class CubeComponent  {
    @Input() value: number;
    public valueCubed(): number {
        return this.value * this.value * this.value;
    }
}

quad.component.ts

import {Component, Input} from '@angular/core';
@Component({
    selector: 'quadrupal-value',
    template: `{{valueQuadrupaled()}}`
})
export class QuadComponent  {
    @Input() value: number;
    public valueQuadrupaled(): number {
        return this.value * this.value * this.value * this.value;
    }
}

simple-1.component.ts

// ...repeated 6 times
import {Component, Input} from '@angular/core';
@Component({
    selector: 'simple-1-value',
    template: `{{ value }}`
})
export class Simple1Component {
    @Input() value: number = 1;
}

square.component.ts

import {Component, Input} from '@angular/core';
@Component({
    selector: 'squared-value',
    template: `{{valueSquared()}}`
})
export class SquareComponent  {
    @Input() value: number;
    public valueSquared(): number {
        return this.value * this.value;
    }
}