# Multiple times the same component in one page with identifier in angularjs application

I have an angularjs application. In this one I have a component to display a graph. So in the parent of the components, I receive the data and I pass them to the child component. But in this page I can have many times the same components but with different data. But I always pass the data in the same variable. So all the data go in the last component created.

I tried to copy the data in another variable on the initialization of the component but it doesn’t work.

This is my template for the parent:

...
<div id="main{{tab.comparisonId}}" class="graphsContainerComparison">
<!-- placeholder for graphs -->
<ul class="graphsList">
<li ng-if="tab.selectedGraphs.length !== 0 && tab.selectedGraphs.indexOf('barGraphDurationEnergy') !== -1" class="component">
<bar-graph-duration-energy
bar-graph-duration-energy-data="listJobsViewCtrl.barGraphDurationEnergyData"
selected-tab="listJobsViewCtrl.selectedTab"
remove-graph="listJobsViewCtrl.removeGraph">
</bar-graph-duration-energy>
</li>
</ul>
</div>
...


So I can have a lot of barGraphDurationEnergy components.

This is my component:

.component('barGraphDurationEnergy', {
templateUrl: 'widgets/listJobs/themes/base/views/components/barGraphDurationEnergy.html',
bindings: {
barGraphDurationEnergyData: '<',
selectedTab: '<',
removeGraph: '='
},
controller: require('./components/barGraphDurationEnergy/barGraphDurationEnergy-component.js'),
controllerAs: 'barGraphDurationEnergyCtrl'
})


And this is the initialization of my component:

this.$onInit = function () { widgetCtrl.selectedTab.loadingBarGraphDurationEnergy = true; widgetCtrl.selectedTab2 = angular.copy(widgetCtrl.selectedTab); widgetCtrl.comparisonId = angular.copy(widgetCtrl.selectedTab.comparisonId); var main =$('#main' + widgetCtrl.comparisonId);
var width = main.width();
var height = main.height();
$timeout(function () { var loaderContainerDiv =$('#loaderContainerDiv_' + widgetCtrl.comparisonId);
});
};


So I was thinking that with the angular.copy(...) I could keep the comparisonId because I had a copy, so if the one from the parent changes, this one doesn’t change, but each times a new one is created, the comparisonId of each components is equal to the last one.

And I need it because, every times the data to display changes (from the parents), I need to know on which components we are and display the data like this:

 \$('#containerBarGraphDurationEnergy_' + widgetCtrl.comparisonId).highcharts(widgetCtrl.barGraphDurationEnergy);


So I need the comparisonId to find the component in the page.

So do you have an idea how I can keep the comparisonId for each component, so in fact how I can have multiple times the same component in the same page and for each components have an identifier ?

Source: AngularJS