@Input() Decorator and directives Angular-2

Question

I am new to angular2, I have 2 questions :-

1. I want to know why this is correct

<p myHighlight [color1]='color' defaultColor="violet">Highlight me!</p>

and these are not

<p myHighlight color1='color' defaultColor="violet">Highlight me!</p>

<p myHighlight [color1]='color' [defaultColor]="violet">Highlight me!</p>

Why i have to put only 1 property in brackets and the other without brackets.

2. How can i use @Input() directive without aliasing in my code. does it work for multiple properties ? Here is my directive code :

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

@Directive({
    selector: '[myHighlight]'
})
export class myDir {
    constructor(private el: ElementRef) {
    }

    @Input('color1') color: string;//for ts code 'color' for html code 'myHighlight' i.e template component
    @Input('defaultColor') defaultColor: string;
    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.color || this.defaultColor);
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

my html code :-

    <div>
    <input type="radio" name="clr" (click)="color='lightgreen'">Green
    <input type="radio" name="clr" (click)="color='yellow'">Yellow
    <input type="radio" name="clr" (click)="color='cyan'">Cyan
</div>

<p myHighlight [color1]='color' [defaultColor]='violet'>Highlight me!</p>

Answer 1

First One

<p myHighlight color1='color' defaultColor="violet">Highlight me!</p>

color1 and default color are not attributes of paragraph tag so it will not work.

Second

<p myHighlight [color1]='color' [defaultColor]="violet">Highlight me!</p>

Your directive sets the color1 property to your paragraph tag and there is no violet variable in the component.

Everything inside [ ] are property bindings and those properties are represented using @Input() decorator.

Note: When you are using a component variable to bind property it should be in [ ]. If you are using direct value then you need not enclose in square brackets