fix(renderer): implement createComment and createText methods using

Placeholders.

- createComment - create new element "Comment" using ui/placeholder and
attach it. These comments are used as anchors (nextSibling) for structural directives such as *ngIf and *ngFor.
- createText - create new element "DetachedText" using ui/placeholder
and don't attach it.

Author: sis0k0

nativescript-angular/element-registry.ts

@@ -2,7 +2,7 @@ import { View } from "tns-core-modules/ui/core/view";
 
 export type ViewResolver = () => ViewClass;
 export type NgView = View & ViewExtensions;
-export const TEMPLATE = "template";
+export const TEMPLATE = "ng-template";
 
 export interface ViewClassMeta {
     skipAddToDom?: boolean;
@@ -117,3 +117,10 @@ registerElement("Span", () => require("tns-core-modules/text/span").Span);
 
 registerElement("DetachedContainer", () => require("tns-core-modules/ui/proxy-view-container").ProxyViewContainer,
     { skipAddToDom: true });
+
+registerElement("DetachedText", () => require("ui/placeholder").Placeholder,
+    { skipAddToDom: true });
+
+registerElement("Comment", () => require("ui/placeholder").Placeholder,
+    { skipAddToDom: false });
+

nativescript-angular/renderer.ts

@@ -124,6 +124,21 @@ export class NativeScriptRenderer extends RendererV2 {
         return this.viewUtil.nextSiblingIndex(node);
     }
 
+    createComment(_value: any) {
+        traceLog(`NativeScriptRenderer.createComment ${_value}`);
+        return this.viewUtil.createComment();
+    }
+
+    createElement(name: any, _namespace: string): NgView {
+        traceLog(`NativeScriptRenderer.createElement: ${name}`);
+        return this.viewUtil.createView(name);
+    }
+
+    createText(_value: string) {
+        traceLog(`NativeScriptRenderer.createText ${_value}`);
+        return this.viewUtil.createText();
+    }
+
     createViewRoot(hostElement: NgView): NgView {
         traceLog(`NativeScriptRenderer.createViewRoot ${hostElement.nodeName}`);
         return hostElement;
@@ -139,11 +154,6 @@ export class NativeScriptRenderer extends RendererV2 {
         // Seems to be called on component dispose only (router outlet)
         // TODO: handle this when we resolve routing and navigation.
     }
-
-    createComment(_value: any) {
-        traceLog(`NativeScriptRenderer.createComment ${_value}`);
-    }
-
     setAttribute(view: NgView, name: string, value: string) {
         traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`);
         return this.setProperty(view, name, value);
@@ -197,16 +207,6 @@ export class NativeScriptRenderer extends RendererV2 {
         traceLog("NativeScriptRenderer.setValue");
     }
 
-    createElement(name: any, _namespace: string): NgView {
-        traceLog(`NativeScriptRenderer.createElement: ${name}`);
-        return this.viewUtil.createView(name);
-    }
-
-    createText(_value: string) {
-        traceLog("NativeScriptRenderer.createText");
-        return this.viewUtil.createText();
-    }
-
     listen(renderElement: any, eventName: string, callback: (event: any) => boolean):
         () => void {
         traceLog("NativeScriptRenderer.listen: " + eventName);

nativescript-angular/view-util.ts

@@ -53,7 +53,7 @@ export class ViewUtil {
     }
 
     public insertChild(parent: any, child: NgView, atIndex: number = -1) {
-        if (!parent || child.meta.skipAddToDom || isPlaceholder(child) === true) {
+        if (!parent || child.meta.skipAddToDom) {
             return;
         }
 
@@ -120,8 +120,24 @@ export class ViewUtil {
         }
     }
 
+    public createComment(): NgView {
+        const commentView = this.createView("Comment");
+        commentView.nodeName = "#comment";
+        commentView.visibility = "collapse";
+
+        return commentView;
+    }
+
+    public createText(): NgView {
+        const detachedText = this.createView("DetachedText");
+        detachedText.nodeName = "#text";
+        detachedText.visibility = "collapse";
+
+        return detachedText;
+    }
+
     public createView(name: string): NgView {
-        traceLog("Creating view:" + name);
+        traceLog(`Creating view: ${name}`);
 
         if (!isKnownView(name)) {
             name = "ProxyViewContainer";
@@ -134,14 +150,6 @@ export class ViewUtil {
         return view;
     }
 
-    public createText(): NgView {
-        const text = <NgView>new Placeholder();
-        text.nodeName = "#text";
-        text.visibility = "collapse";
-        text.meta = getViewMeta("Placeholder");
-        return text;
-    }
-
     private isXMLAttribute(name: string): boolean {
         return XML_ATTRIBUTES.indexOf(name) !== -1;
     }
@@ -201,23 +209,22 @@ export class ViewUtil {
     // returns -1 if the node has no parent or next sibling
     public nextSiblingIndex(node: NgView): number {
         const parent = node.parent;
-
         if (!parent) {
             return -1;
-        } else {
-            let index = 0;
-            let found = false;
-            parent.eachChild(child => {
-                if (child === node) {
-                    found = true;
-                }
+        }
+
+        let index = 0;
+        let found = false;
+        parent.eachChild(child => {
+            if (child === node) {
+                found = true;
+            }
 
-                index += 1;
-                return !found;
-            });
+            index += 1;
+            return !found;
+        });
 
-            return found ? index : -1;
-        }
+        return found ? index : -1;
     }
 
     private setPropertyInternal(view: NgView, attributeName: string, value: any): void {