Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation:
import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit} from 'angular2/core';
import {UiTabs, UiPane} from './tabs.component';
@Component({
selector: 'form-builder',
templateUrl: './app/formbuilder/formbuilder.component.html',
directives: [UiTabs, UiPane]
})
export class FormBuilderComponent implements AfterViewInit {
@ViewChild('testDiv') testDiv:ElementRef;
ngAfterViewInit() {
// viewChild is set
var myDiv: HTMLDivElement = this.testDiv.nativeElement;
console.log(myDiv);
}
}
Below is the code snippet from formbuilder.component.html:
<template ui-pane title='Add'>
<div class="moving-box" #testDiv>
Drag this box around
</div>
</template>
Despite the above code, I could only access elements outside of the <template> tag.
UPDATE 1:
import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit,ViewEncapsulation} from 'angular2/core';
import {UiTabs, UiPane} from './tabs.component';
@Component({
selector: 'form-builder',
template: `
<ui-tabs>
<template ui-pane title='Overview'>
<div>test div</div>
You have 1 detail.
</template>
<template ui-pane title='Summary' active="true">
<div #testDiv>second div</div>
</template>
</ui-tabs>
`,
directives: [UiTabs, UiPane],
})
export class FormBuilderComponent implements AfterViewInit {
@ViewChild('testDiv') testDiv:ElementRef;
ngAfterViewInit() {
var myDiv: HTMLDivElement = this.testDiv.nativeElement;
console.log(myDiv);
}
}
The updated example works, but it appears that the element can only be accessed if the current tab has the "active='true'" attribute when the view is initially rendered, otherwise it will result in an error. An example where this does not work is as follows:
<ui-tabs>
<template ui-pane title='Overview'>
<div #testDiv>first tab div</div>
You have 1 detail.
</template>
<template ui-pane title='Summary' active="true">
<div #testDiv1>second tab div</div>
</template>
</ui-tabs>
After the ngAfterViewInit(), the element from the active tab named "Summary" will be accessible, but it won't work for elements in other tabs. Any suggestions on how to access elements on tab change?