CODEWITHSUNDEEP
htmlangulartypescript
Brayan Byrdsong
Brayan Byrdsong

Reputation: 145

How do you pass the element in Angular2 Typescript binding?

How do I get the specific HTML dom element passed through a binding. Sorry if this is hard to understand, here's the code.

donut-chart.html

<div class="donut-chart" (donut)="$element"></div>

How do I pass the div element to donut?

This is the TS

dount-chart.ts

@Component({
  selector: 'donut-chart',
  template: require('./donut-chart.html'),
  directives: [Widget, MorrisChart],
  encapsulation: ViewEncapsulation.None,
  styles: [require('./donut-chart.scss')]
})
export class DonutChart implements OnChanges{
  @Input() height: number = 300;
  @Input() data: any[] = [{label: 'loading', value: '0', color: '#eee'}];

  morris3Options: any;
  donut: any;

  render(): void {
    jQuery(this.donut).css({height: this.height}); // safari svg height fix
    window['Morris']['Donut']({element: this.donut}, this.morris3Options);
  }

I want the donut variable to be the element without using class/id. I need to use multiple donuts and jQuery, so I need a way to get the unique donut.

Upvotes: 5

Views: 6300

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657008

<div #someElement></div>
<div class="donut-chart" (donut)="someElement"></div>

it can also be the current element

<div #someElement class="donut-chart" (donut)="someElement"></div>

Upvotes: 5

Related Questions