How do you pass the element in Angular2 Typescript binding?

Question

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.

Günter Zöchbauer · Accepted Answer · 2016-09-27 12:29:25Z

5

<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>

answered Sep 27, 2016 at 12:29

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brayan Byrdsong Over a year ago

It has to be unique. I'm going to have multiple on the screen at once.

Günter Zöchbauer Over a year ago

Please update your question and add the code that demonstrates how you have multiple on the screen. What element do you want to pass? Can you please provide more context? Perhaps there are other ways to accomplish what you want. Where does the donut event come from?

Brayan Byrdsong Over a year ago

Ahh, so should I be using square brackets? There's a lot to it, but I was just wondering if there was a way to pass the element that you are binding to by using the HTML element instead of class/id. If not, I will look for a different way.

Günter Zöchbauer Over a year ago

Sorry, I don't understand the later parts of your comment. If donut is an @input() instead of an event, then you need to use [donut]. If you want the element of the current component, then you can inject it, but IMHO it doesn't make much sense without more information. I saw your edit but it needs more context. Where is the <div>, where is the donut:any and render() method? How are they related (same component, different components, siblings, parent-child, ...)?

Collectives™ on Stack Overflow

How do you pass the element in Angular2 Typescript binding?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related