Angular 2: Attribute Directive not receiving Input Values

Question

I have made a heatMap Attribute directive which is not receiving the values when passed while calling.

HeatMap Directive:

import {Directive, ElementRef, Input, Renderer, OnInit} from "@angular/core";

@Directive({
    selector: '[HeatMap]',
})

export class HeatMapDirective{

    @Input('startVal') public startVal: string;

    constructor(private el: ElementRef, private renderer: Renderer) {
        this.processHeatMap();
    }

    processHeatMap() {
     console.log(this.startVal); // prints undefined.
    }
}

HTML Element:

    <td class="pad-10" [startVal]="'25'" HeatMap> 25 </td>

I have a scenario where i need to pass both string and numeric values but both are not working. Am I missing something?

Answer 1

Change your html as:

<td class="pad-10" [startVal]="'25'" HeatMap> 25 </td>

Answer 2

Input values are not initialized yet when addressing them from the constructor, address them from ngOnInit() like that :

ngOnInit() {
  this.processHeatMap();
}