I have a component
import { Component } from '@angular/core';
@Component({
selector: 'test-component',
template: '<b>Content</b>',
})
export class TestPage {
constructor() {}
}
And I have another component:
import { Component } from '@angular/core';
@Component({
selector: 'main-component',
templateUrl: 'main.html',
})
export class MainPage {
constructor() {}
putInMyHtml() {
}
}
main.html:
<p>stuff</p>
<div> <!-- INSERT HERE --> </div>
How can I dynamically insert my TestPage
component into the area where <!--INSERT HERE-->
is programatically, like when I run putInMyHtml
.
I tried editing the DOM and inserting <test-component></test-component>
but it doesn't display the content text from TestPage's template.