Angular2 @Input undefined when trying to bind to a string constant

Maybe this is normal behavior, making a test, this.myColor It is undefined, but why? That mistake wrong in my code:

<h1 myDR [myColor]="red" > Test </h1>

import {Component, Directive, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[myDR]',
    host:{
        '(mouseenter)' : ' mouseEnter()'
    }
})

export class MyDi {
    
    @Input () myColor: string;
    
    constructor(private el:ElementRef) {
        
    }
    
    mouseEnter(){
      
        this.el.nativeElement.style.backgroundColor = this.myColor;
    
        console.log(this.myColor);
     }
}

@Component({
    selector: 'my-app',
    template: `<h1>Hello World Angular2</h1> 
 
              <h1 myDR [myColor]="red" > Test </h1>
              `,
    directives: [MyDi]
})

export class App {
    constructor(){
        
    }
}

You can move the mouse over "Test" and look in the Console

Plunker