Property not recognized when using @Input in a policy

Consider the following directive:

import {Directive, HostListener, HostBinding, Input} from '@angular/core';

@Directive({
    selector: '[myHighlight]'
})
export class HighlightDirective {

    @HostListener('mouseenter') onMouseOver() {
        this.backgroundColor = this.hightLightColor;
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.backgroundColor = this.defaultColor;
    }

    @HostBinding('style.backgroundColor') backgroundColor:string;

    @Input() defaultColor:string = 'white';
    @Input() hightLightColor:string = 'yellow';

    constructor() {
    }

}

Note that you have created 2 variables defaultColor and hightLightColor using decorator @Input .

In the component's HTML, I added the input property :

<p myHighlight [defaultcolor]="'grey'" [hightlightcolor]="'red'">
    Texto highlight
</p>

However, the following error occurs in the browser:

Uncaught Error: Template parse errors: 
Can't bind to 'defaultcolor' since it isn't a known property of 'p'.

<p myHighlight [ERROR ->][defaultcolor]="'grey' [hightlightcolor]="'red'">
    Texto highlight
</p>

Can't bind to 'hightlightcolor' since it isn't a known property of 'p'.

<p myHighlight [defaultcolor]="'grey'" [ERROR ->] [hightlightcolor]="'red'">
    Texto highlight
</p>

What is wrong with the code so that the defaultcolor and hightlightcolor properties are not recognized?