Property is not recognized when using @Input in a directive

Question

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 2 variables have been created defaultColor and hightLightColor using the developer @Input.

In the component’s HTML, I added the input Property:

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

However in the browser the following error occurs:

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 in the code for that properties defaultcolor and hightlightcolor are not recognised?