[Angular 2] @Input & @Output Event with ref

The application is simple and to build a color picker:

When click the Rect box, it'll check the color value below and title color would also change.

Color-picker.ts:

Import {Component, Output, Eventemitter, Input} from "@angular/core"'./constants '; @Component ({    ' Color-picker ',    moduleId:module.id,    ' color-picker.component.html ') export class colorpicker{    @Input () color:string;    @Output (new  eventemitter ();     = RED;     = BLUE;    Choose (color) {        this. Colorout.emit (color);    }}

Color-picker.component.html:

<Divclass= "Color-title"[Ngstyle]= "{Color:color}">Pick a Color, plz:</Div><Divclass= "Color-picker">    <Divclass= "Color-sample color-sample-blue"(click)= "Choose (red)"></Div>    <Divclass= "Color-sample color-sample-red"(click)= "Choose (blue)"></Div></Div>

So the logic is we'll take a color input, it's used in title styling:

<class= "Color-title"  [Ngstyle]= "{Color:color}"> Pick a Color, plz:</div>

When we click on the One Rect box, fire choose () function, it'll output a event named "Selectedcolor":

New Eventemitter ();    Choose (color) {        this. Colorout.emit (color);    }

If we don ' t give name 'selectorcolor', it'll used 'colorout' as name.

In app.ts, it is used:

            <color-picker #picker [color]= "Picker.color" (selectedcolor) = "Picker.color = $event" >              </ Color-picker>            {{Picker.color}}

Here we use reference:

#picker

And we assign the color back from output event to Picker.color, this picker.color then'll be used as I Nput to Color-pick to change the title color.

The benfits to use reference is avoid assign a local variable.

[Angular 2] @Input & @Output Event with ref