I need to get a handle on a specific DOM element defined in the template of an Angular 2 Component so that I can work with it in my code. I do not want to use jQuery and ElementRef but rather a variable that can be defined in the template itself to refer to the element I need to work with. I am able to achieve my goal using an "inner component" that I insert in "my component". I define an Input property in the "inner Component" and bind the template variable to this property; after I do so I can use the DOM element in the code of my "inner component".I am pretty sure though that there is a simpler way to reach the same result. Can anybody advise? Here a sample code that describes the what I do. Thanks in advance
import {Component} from 'angular2/core';
import {MyInnerComponent} from './myInnerComponent';
@Component({
selector: 'my-component',
template: `
<div #thisElement id="thisElement">
<my-inner-component [element]="thisElement"></my-inner-component>
</div>
`,
directives: [MyInnerComponent]
})
export class MyComponent {
}
import {Component, OnInit, Input} from 'angular2/core';
@Component({
selector: 'my-inner-component',
template: `
`,
inputs: ['element'],
})
export class MyInnerComponent implements OnInit {
@Input() element: any;
ngOnInit() {
console.log(this.element);
}
}
