Angular2 How to get reference of HTML elements generated dynamically
Use ElementRef
class from @angular/core
to get the parent element and then create an HTMLElement
to get its dynamic elements by class name.
Component:
declare var $: any; //intentional use of jQuery-not recommended though
@Component({
selector: 'my-app',
template: `
<input type='button' (click)='addDiv()' value='Add New Div' />
<input type='button' (click)='selectDiv()' value='Select' />
`
})
export class App {
constructor(private elRef: ElementRef) {
}
addDiv() {
/*intentional use of jQuery for appending new div
give a class to your dynamic elements*/
$('my-app').append("<div class='foo'>Hello I'm Dynamic!</div>");
}
selectDiv() {
//create a new HTMLElement from nativeElement
var hElement: HTMLElement = this.elRef.nativeElement;
//now you can simply get your elements with their class name
var allDivs = hElement.getElementsByClassName('foo');
//do something with selected elements
console.log(allDivs);
}
}
Working Plunker
Edit: I used jQuery
only for quick demo purpose here. Otherwise, you should not use jQuery
with Angular
.
The only response is
let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")
No other angular weird ceremony needed
Tested on angular 4+