Basic input/outputs for nested components in Angular (Angular 4/Angular 2)

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
            System.import('app')
              .catch(console.error.bind(console));
        </script>
  </head>

  <body>
    <my-app>
            loading...
        </my-app>
  </body>

</html>

/* Styles go here */
div {
  height: 40px;
  margin: 20px auto;
  width: 80%;
}

.red { background-color: #ff0000; }
.blue { background-color: #0000ff; }
.gray { background-color: #dddddd; }
.green { background-color: #00ff00; }
.yellow { background-color: #f0ff00; }
.purple { background-color: #ff00ff; }
.black { background-color: #000000; }
.indigo { background-color: #00ffff; }
.orange { background-color: #ff8800; }

### Basic input/outputs for nested components in Angular (Angular 4/Angular 2)

* highlights Angular's two-way data-binding, in a nested component structure
* also includes "transclusion" (components within content areas of other components)
* bare minimum for (very ugly) styling & structure

System.config({
    //use typescript for compilation
    transpiler: 'typescript',
    //typescript compiler options
    typescriptOptions: {
        emitDecoratorMetadata: true
    },
    paths: {
        'npm:': 'https://unpkg.com/'
    },
    //map tells the System loader where to look for things
    map: {
        'app': './src',
        
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
        
        '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
        '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
        '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
        '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
        '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
        '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
        '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
        
        'rxjs': 'npm:rxjs',
        'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
    },
    //packages defines our app package
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule, VERSION} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {ReactiveFormsModule} from '@angular/forms';

import { ParentComponent } from './parent.component';
import { SelectorComponent } from './selector.component';
import { ChildComponent } from './child.component';
import { AltChildComponent } from './alt-child.component';
import { GrandchildComponent } from './grandchild.component';

@Component({
    selector: 'my-app',
    template: `
        <div>
          <h2>Hello {{name}}</h2>
        </div>
        <parent></parent>
    `,
})
export class App {
    name:string;
    constructor() {
        this.name = `Angular! v${VERSION.full}`
    }
}

@NgModule({
    imports: [ BrowserModule, ReactiveFormsModule ],
    declarations: [ 
        App, 
        ParentComponent,
        SelectorComponent,
        ChildComponent,
        AltChildComponent,
        GrandchildComponent
    ],
    bootstrap: [ App ]
})
export class AppModule {}

import {Component} from '@angular/core';

@Component({
  selector: 'parent',
  template: `
    <main class="blue">
        <alt-child design="black">
            <selector design="purple" (valueSelected)="valueChanges($event)"></selector>
        </alt-child>
        <alt-child design="gray" *ngIf="selectedVal">
            <grandchild design="green"></grandchild>
        </alt-child>
        <child design="red" [value]="selectedVal" [position]="2">
            <grandchild design="yellow"></grandchild>
        </child>
        <child design="indigo" [value]="selectedVal" [position]="3">
            <grandchild design="orange"></grandchild>
        </child>
    </main>
  `,
})
export class ParentComponent {
    constructor(
    ) { }
    
    selectedVal: string;
    
    valueChanges(val: number) {
        this.selectedVal = val;
    }
}

import {Component, Input} from '@angular/core';

@Component({
  selector: 'child',
  template: `
    <div [ngClass]="design" *ngIf="value >= position">
        <ng-content></ng-content>
    </div>
  `,
})
export class ChildComponent {
    @Input() design: string;
    @Input() value: number;
    @Input() position: number;
    constructor(
    ) { }
}

import {Component, Input} from '@angular/core';

@Component({
  selector: 'grandchild',
  template: `
    <div [ngClass]="design">
    </div>
  `,
})
export class GrandchildComponent {
    @Input() design: string;
    constructor(
    ) { }
}

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'selector',
  template: `
    <div [ngClass]="design">
        <select #selectorElem (change)="selectValue(selectorElem.value)">
            <option selected disabled value="">Open projects</option>
            <option *ngFor="let item of list" [value]=item.id>{{item.name}}</option>
        </select>
    </div>
  `,
})
export class SelectorComponent {
    @Input() design: string;
    @Output() valueSelected: EventEmitter<number> = new EventEmitter();
    constructor(
    ) { }
    
    public list = [
        {
          id: 1,
          name: "One"
        },
        {
          id: 2,
          name: "Two"
        },
        {
          id: 3,
          name: "Three"
        }
    ]
    
    selectValue(val: number) {
        this.valueSelected.emit(val);
    }
}

import {Component, Input} from '@angular/core';

// Template for basic Reactive Form
@Component({
  selector: 'alt-child',
  template: `
    <div [ngClass]="design">
        <ng-content></ng-content>
    </div>
  `,
})
export class AltChildComponent {
    @Input() design: string;
    constructor(
    ) { }
}