CODEWITHSUNDEEP
angularc3.js
Arun Kumar
Arun Kumar

Reputation: 15

How I can bind the div id for dynamically for binding c3 js chart into the div in angular2

How I can bind the div id for dynamically for binding c3 js chart into the div. I have used attr.id and [id] etc but none of its not working. please someone can help me out of this.

@Component({
selector: 'chart-component',
template: <h1>{{chartId}}</h1>
 <div [id] = {{chartId}} class="c3"> </div>

})


export class ChartComponent implements OnInit
{

  constructor(){ }

  @Input('chartType') chartType:string;
  @Input('chartId') chartId:Object;
  @Input('chartData') chartData:any[];


  ngOnInit() {
    this.chartId = Object("chart1");
    let chart = c3.generate({
        bindto: '#'+this.chartId,   
        data: {
            json:this.chartData,
            type: this.chartType,
        },
        legend: {
              show: true
        }
  });

}
}

from html calling the component below mentioned.

<chart-component chartType="bar" chartId="chart1" [chartData]="chartData">

I have tried to use object as div id but still its not working.

Thanks,

Arun s

Upvotes: 0

Views: 928

Answers (2)

bob
bob

Reputation: 127

The is the purpose of @Hostbinding. I would throw an attribute directive on it and within the directive use something like:

@HostBinding('attr.id') id = '#'+this.chartId;

I'm not certain of the logic you'll need, but something along these lines.

Upvotes: 0

yurzui
yurzui

Reputation: 214175

Don't use [] and {{}} together. Either the one 

[id]="chartId"

or the other

id="{{chartId}}"

And you need to use ngAfterViewInit hook instead of ngOnInit because your id binding has not applied yet.

Here's Plunker Example

Upvotes: 1

Related Questions