Menu
I've created ContentPage component as follows:
@Component({ selector: 'content-page',
template: '<ng-content></ng-content>' })
export class ContentPage {
}
and then bootstrapped it within the module:
@NgModule({
imports: [ BrowserModule ],
declarations: [ ContentPage ],
bootstrap: [ ContentPage ]
})
export class AppModule { }
The page template is:
<!DOCTYPE html>
<html>
... angular2 quickstart head ...
<body>
<div class="container" style="padding-top: 20px">
<content-page>
<div style="float: right; width: 150px">
<content-button-edit></content-button-edit>
</div>
<div data-page-id="{{page-id}}">
Some content here
</div>
</content-page>
</div>
</body>
</html>
When the page loads, the "Some content here" appears for a moment and then disappears. I suppose that it should be inserted instead of ng-content in the ContentPage's template as I have ng-content directive in it. When I change the page template, it changes the output so it is definitely applied.
Is there a way to preserve the markupped content of the component?
Update:
What I want to achieve is to generate the HTML page with content on server and then just add the dynamic functionality.
As the content-button-edit should actually hide "Some content here" and display edit page control instead, I'm thinking about using the container component that contains both and .
So template or templateUrl are not the options.
591
You can try the following approach:
app.component.ts
@Component({
selector: 'content-page',
template: document.querySelector('content-page').innerHTML
})
export class AppComponent {
pageId = 1;
}
index.html
<div class="container" style="padding-top: 20px">
<content-page>
<div style="float: right; width: 150px">
<content-button-edit></content-button-edit>
</div>
<div [attr.data-page-id]="pageId">
Some content here
</div>
</content-page>
</div>
See Plunker Example
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
