Angular @Hostbinding does not work

Question

i've similar problem with @Hostbinding like other questions, but i could not solve that.

My template:

<main class="my_active">


    <user myDirective="'false'">
    </user>
</main>

And my directive

@Directive({
    selector:'[myDirective]'
})

export class MyDerective {


    @HostBinding('class.img')
    isMyCirclePic:boolean;

    @HostListener('mouseover')
    onMouseEnter(){
        console.log('VALUE BEFORE:', this.isMyCirclePic);
        console.log('MAUS ENTER');
        this.isMyCirclePic=true;
        console.log('VALUE AFTER:', this.isMyCirclePic);

    }

    @HostListener('mouseleave')
    onMouseLeave(){
        console.log('VALUE BEFORE:', this.isMyCirclePic);
        console.log('MAUS LEAVE');
        this.isMyCirclePic=false;
        console.log('VALUE AFTER:', this.isMyCirclePic);
    }
}

1. Problem is, that my isMyCirclePic is undefined for the first time. After that it will be set true of false. I use same template several times, and when i click on other template (from same kind of template), so isMyCirclePic undefined also.
2. I'am changing true or false within events, but it will no be rendered. My 'class.img'-picture stays everytime on the same value.

UPDATE

I've tried out solution with @Input @HostBinding.

<main class="my_active">
    <user 
        myDerective
        [myColor]="font_color">
    </user>
</main>

And my myColor-Direktive:

@Directive({
    selector:'[myColor]'
})
export class MyColor {

    @HostBinding('style.color')
    font_color:string;

    @Input()
    set myColor(color:string) {
        this.font_color = color;
        console.log('COLOR VALUE SET:', this.font_color);
    }

    get myColor():string{
        console.log('COLOR VALUE GET:', this.font_color);
        return this.font_color;
    }
}

But it still not working. I can see, that the value will be passed by @Input-param. I can see, that set-function will be called. But i can't see, that get-function will be called, what i've expected. So i see no changes.

Answer 1

you can use @Input() @HostBinding

@Directive({
    selector:'[myDirective]'
})

export class MyDerective {
   @Input() @HostBinding('class.img') isMyCirclePic:boolean;

    @HostListener('mouseover')
    onMouseEnter(){
        console.log('VALUE BEFORE:', this.isMyCirclePic);
        console.log('MAUS ENTER');
        this.isMyCirclePic=true;
        console.log('VALUE AFTER:', this.isMyCirclePic);

    }

    @HostListener('mouseleave')
    onMouseLeave(){
        console.log('VALUE BEFORE:', this.isMyCirclePic);
        console.log('MAUS LEAVE');
        this.isMyCirclePic=false;
        console.log('VALUE AFTER:', this.isMyCirclePic);
    }
}

bind it in tmeplate

 <div myDirective [isMyCirclePic]="false">
             myDirective
</div>