Components Essentials

color-picker.ts

@Component({
    selector: 'color-picker',
    template: `
    
    <div class="color-title" [ngStyle]="{color:color}">Pick a Color:</div>  
    
    <div class="color-picker">
        <div class="color-sample color-sample-blue" (click)="choose('${BLUE}')"></div>  
        <div class="color-sample color-sample-red" (click)="choose('${RED}')"></div>                
    </div>
    `
})
export class ColorPicker {

    @Input()
    color:string;

    @Output("color")
    colorOutput = new EventEmitter();

    choose(color) {
        this.colorOutput.emit(color);
    }

    reset() {
        this.colorOutput.emit('black');
    }

}

color-previewer.ts

@Component({
    selector: 'color-previewer',
    template: `
                <div class="color-previewer" [ngStyle]="{color:color}"> 
                    Preview Text Color
                </div>
            `
})
export class ColorPreviewer {

    @Input()
    color:string;
    
}

components-essentials.ts

@Component({ 
    selector: 'app',
    directives: [ColorPreviewer, ColorPicker],
    template: `
            
            <color-picker #picker [color]="color" (color)="color = $event">  
            </color-picker>
                
            <color-previewer #previewer [color]="color"></color-previewer>
                
            <button (click)="picker.reset()">Reset</button>
        `
})
export class App {

    color:string;
}

bootstrap(App);