Angular 2 attribute directive input values are undefined and not set correctly

Question

I have following directive (TextElementDirective), that has 4 input variables colorHex, fontFamily, fontWeight, fontStyle. I want to set an element's color and style using this directive.

@Directive(
{
    selector: "[text-element-map]",
    // host: {
    //     '(mousemove)': "onMouseMove()"
    // }
}
)

export class TextElementDirective{
@Input() colorHex : string;
@Input() fontFamily : string;
@Input() fontWeight : string;
@Input() fontStyle : string;

constructor(private el: ElementRef){
    this.setElement();
}

setElement(){
    if(this.colorHex){
        this.el.nativeElement.style.color = this.colorHex;
    }
    if(this.fontFamily){
        this.el.nativeElement.style.fontFamily = this.fontFamily;
    }
    if(this.fontWeight){
        this.el.nativeElement.style.fontWeight = this.fontWeight;
    }
    if(this.fontStyle){
        this.el.nativeElement.style.fontStyle = this.fontStyle || "";
    }
}

onMouseMove(){
    this.setElement();
}
}

When I use this directive in another component, as an attribute, it doesn't set the element style and color. Even if you click the button, the element values are not set.

If I use a host (onmousemove) in the directive, it works fine. But I want to set the values during start up.

Any idea what am i missing?

Here is the test component that uses it.

@Component({
template:
`
    <h3>Test</h3>
    <div>
        <span>text-element-map: </span>
        <span class="text-content" text-element-map [colorHex]="colorHex" 
             [fontFamily]="fontFamily" [fontWeight]="fontWeight" [fontStyle]="fontStyle">Change this text</span>

        <button (click)="setCurrentDesignElement()">Click</button>
    </div>
`,
directives:[TextElementDirective],
changeDetection: ChangeDetectionStrategy.Default
})
export class TestComponent{

@ViewChild(TextElementDirective)
private childTextElement: TextElementDirective;


colorHex: string = "#e2e2e2";
fontFamily: string = "Arial";
fontWeight: string = "normal";
fontStyle: string = "normal";

setCurrentDesignElement(){
    this.color = {
        hex: "#B4B4B4",
        id: 5745,
        name: "Athletic Heather"
    };

    this.font = {
        cssString: "Valera Round",
        weight: "normal",
        style: "italic"
        };

    this.colorHex = "#B4B4B4";
    this.fontFamily = "Valera Round";
    this.fontWeight = "normal";
    this.fontStyle = "italic";    

    //this.childTextElement.setElement();
}


}

Günter Zöchbauer · Accepted Answer · 2018-05-03T13:39:17.410

71

Input()s aren't available in the constructor. They are set by change detection, and change detection is run after the component is instantiated. The lifecycle hooks ngOnChanges (every update) and ngOnInit (once after the first ngOnChanges call) are called after change detection updated an input:

Change

constructor(private el: ElementRef){
    this.setElement();
}

to

constructor(private el: ElementRef) {};

ngOnInit() {
  this.setElement();
}

ngOnInit() is called after the inputs are initialized.

Instead of

this.el.nativeElement.style.color = this.colorHex;

it's better to use

@HostBinding('style.color')
@Input() colorHex : string;

@HostBinding('style.font-family')
@Input() fontFamily : string;

@HostBinding('style.font-weight')
@Input() fontWeight : string;

@HostBinding('style.font-style')
@Input() fontStyle : string;

Actually I haven't tried myself to add @HostBinding() and @Input() on the same field, but I don't see why it wouldn't work.

edited May 03 '18 at 13:39

answered Mar 14 '16 at 16:37

Günter Zöchbauer

623,577
216
2,003
1,567

It works when the directive is initialized. But when I click the button to reset colorHex, fontFamily, etc.. it doesn't reset the text. How do I make sure that the setElement () is called when the model changes? Why is the change detection not taking over? – D M Mar 14 '16 at 16:48
1

There are two ways: make `colorHex`, ... setters and getters or change `ngOnInit()` to `ngOnChanges(changes)`. `ngOnChanges` is called every time input values change. With my suggestion above you shouldn't need `setElement()` at all. – Günter Zöchbauer Mar 14 '16 at 16:51
Yes. You are right. When I use HostBinding, I don't need setElement function. Thanks a lot. – D M Mar 14 '16 at 16:55
2

Doh! So obvious now. Thankyou. – Astravagrant Apr 09 '16 at 14:50
1

Shouldn't the ctor be changed to 'constructor(private el: ElementRef) {}'? – Drammy May 03 '18 at 13:29
1

@Drammy thanks - fixed (mixed in a bit of Dart syntax ;-) ) – Günter Zöchbauer May 03 '18 at 13:39

Angular 2 attribute directive input values are undefined and not set correctly

1 Answers1