How to use a variable in a template in angular 2

Question

I have a component which has chartid as a input which I use like this:

<plotlychart chartid="plot"> 
</plotlychart>

This is the component. In the template I try to set the id of the div to the variable "chartid", but this is not working.

@Component({
selector: 'plotlychart',
template: `
    <div [id]="chartid" 
     style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
    </div>
`,
styleUrls: []
})


export class PlotlyComponent{    
    @Input() chartid: string; 
}

My question is: Is it possible to use the value of chartid in the template of the component?

Solution

<plotlychart chartid="plot"> 
</plotlychart>

In component:

@Component({
selector: 'plotlychart',
template: `
    <div id="{{chartid}}" 
     style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
    </div>
`,
styleUrls: []
})


export class PlotlyComponent{    
    @Input() chartid: string; 
    ngAfterViewInit(){
    Plotly.newPlot(this.chartid, this.data, this.layout, this.options);
    }
}

Answer 1

Your <plotlychart> should be like this:

<plotlychart [chartid]="plot"> </plotlychart> <!-- (note the [] here!) -->

Now in your PlotlyComponent template you could just use interpolation for the chartid , like so:

template: `
    <div id="{{ chartid }}" 
         style="width: 480px; height: 400px;">
    <!-- Plotly chart will be drawn inside this DIV -->
    </div>
`,

Further readings for you:

• Angular 2 - Template Syntax (inputs & outputs)
• Angular 2 - Component Communication (parent to child)

Answer 2

as the OP mentioned he is using Plotly...

Try to wrap the Plotly.plot(this.chartid, ...) in a AfterViewInit method. I once had an issue where the component wasn't properly loaded and in the actual page DOM when I called Plotly. Using AfterViewInit ensures the DOM is setup before you call to the charting library.

In your component:

ngAfterViewInit() {
    Plotly.plot(this.chartid, yourdata, ...)
  }

Hope this helps.