Search code examples
angularjustgage

Div id not recognised for justGage in angular 2

I am creating a component for gauges using JustGage in angular 2.

Following is my component,

@Component({
    selector: 'my-gauge',
    template: '<div id={{gaugeId}} style="width:200px; height:150px;" ></div>'
})
export class GaugeComponet implements OnInit {

    @Input()
    gaugeId: String;

    ngOnInit() {
        console.log("inside on init with id : " + this.gaugeId);
        var g = new JustGage({
            id: this.gaugeId,
            value: 45,
            min: 0,
            max: 100,
            title: "Title"
        });
    }
}

and its usage in app component,

@Component({
    selector: 'my-app',
    template: '<h1>Gauge Demo</h1> <my-gauge gaugeId="testId"></my-gauge>',
    directives :[GaugeComponet]
})
export class AppComponent { }

When I am running this code I am getting the following output in my browser console ,

inside on init with id : testId GaugeComponent.js (line 16)
* justgage: No element with id : testId found

When I hardcode the id in gauge component , I am able to see the gauge on my page.

What am I doing wrong?

Solution

  • You don't pass testId as string.

    Try this:

    <my-gauge gaugeId="'testId'"></my-gauge>

    Or you need to have the testId variable in your AppComponent:

    @Component({
    selector: 'my-app',
    template: '<h1>Gauge Demo</h1> <my-gauge gaugeId="testId"></my-gauge>',
    directives :[GaugeComponet]
})
export class AppComponent {
  testId = 'testId';
}

    Update

    You also need to use ngAfterViewInit hook instead of ngOnInit to init JustGage