Angular4: unable to use <ng-container> with component selector
I've had some UI problem in the past like Bootstrap and Semantic-UI. When I create a new component in the template, it breaks the style because Angular2 was adding elements to the DOM.
I decided to use and declare the selector as "[selector component]" in the component.
I have now upgraded to Angular4 and if I use the component selector in the ng container I get this error:
HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at DefaultDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.appendChild (platform-browser.es5.js:2789)
at DebugRenderer2.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.appendChild (core.es5.js:13321)
at createText (core.es5.js:11688)
at createViewNodes (core.es5.js:12070)
at callViewAction (core.es5.js:12530)
at execComponentViewsAction (core.es5.js:12439)
at createViewNodes (core.es5.js:12113)
at createEmbeddedView (core.es5.js:11979)
at callWithDebugContext (core.es5.js:13206)
at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.es5.js:12739)
at DefaultDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.appendChild (platform-browser.es5.js:2789)
at DebugRenderer2.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.appendChild (core.es5.js:13321)
at createText (core.es5.js:11688)
at createViewNodes (core.es5.js:12070)
at callViewAction (core.es5.js:12530)
at execComponentViewsAction (core.es5.js:12439)
at createViewNodes (core.es5.js:12113)
at createEmbeddedView (core.es5.js:11979)
at callWithDebugContext (core.es5.js:13206)
at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.es5.js:12739)
at resolvePromise (zone.js:769)
at resolvePromise (zone.js:740)
at zone.js:817
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:4140)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)
I don't want every component to write a new item. Is there a way to avoid this?
source to share
Cause
Yes, because it ng-container
is a virtual DOM element in Angular. With this element you can add any conditions for DOM rendering. As an example:
<ng-container *ngIf="1">
<ng-container *ngIf="1">
Element 1
</ng-container>
<ng-container *ngIf="0">
Element2
</ng-container>
</ng-container>
But these elements are not actually created by the DOM. angular only creates a COMMENT_NODE to manipulate bindins next time. You can see this in the following screenshot:
Conclusion
The comment node does not support adding child nodes!
Decision
You should use the root attribute (as an example article
) to add a directive to node.
<article product-cart product="product"></article>
But in many cases, you must add a condition to render the element. This allows an ng container to be used to display additional nodes in the DOM.
<ng-container *ngIf="product.availableForPurchase">
<article product-cart product="product"></article>
</ng-container>
source to share