I am in need of accessing the elements of a dynamically created component's DOM through the innerHTML directive in Angular. Below is my main component:
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-block [template]="template"></app-block>
`
})
export class AppComponent {
protected template = `
<main role="main" class="inner cover">
<h1 class="cover-heading text-center">Cover your page.</h1>
<p #paragraph class="lead">Cover is a one-page template for building simple and beautiful home pages.
Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p #paragraph class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</main>
`;
}
And here is the dynamically created component:
import {
AfterViewInit,
Component,
Input,
ViewChildren,
} from '@angular/core';
@Component({
selector: 'app-block',
template: `
<div [innerHTML]="template"></div>
`
})
export class BlockComponent implements AfterViewInit {
@Input() template: String;
@ViewChildren('paragraph') ps;
public ngAfterViewInit(): void {
console.log(this.ps.length);
}
}
When I tried to get the length of my object, it appeared to be empty as if it couldn't detect the auto-generated template.