Menu
The page shows basic markup, comforting message and loading indicator.
<html>
...
<body app>
...page layout and loading stuff...
</body>
</html>
And root component is
@Component({
selector: 'body[app]',
template: `<ng-content></ng-content>`
})
App {}
A plunker that demonstrates the problem is here.
After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.
However, root component just ignores ng-content.
This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.
body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.
It looks like it is a known problem but I'm unable to find a workable solution.
How can it be fixed?
618
Content projection is a pattern in which you insert, or project, the content you want to use inside another component. For example, you could have a Card component that accepts content provided by another component.
Use the :host /deep/ selector. If you want to use the shadow DOM polyfill and style your components using the style or styleUrls attribute of the Component decorator, select the element with :host , then ignore the shadow DOM polyfill with the /deep/ child selector. :host will select the element.
The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.
Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.
From https://github.com/angular/angular/issues/1858#issuecomment-207993202
Components only work as components when referenced in the template of another component, yet they are expected to be used outside of this which causes confusion
191
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
