fix(renderer): correct createElement behaviour for EmulatedRenderer (#718)

setAttribute is now called on createElement instead of appendChild when
using EmulatedRenderer.

Author: sis0k0

Diff for: nativescript-angular/renderer.ts

@@ -4,13 +4,12 @@ import {
     RendererStyleFlags2, ViewEncapsulation,
 } from "@angular/core";
 
-import { isBlank } from "./lang-facade";
 import { View } from "ui/core/view";
 import { addCss } from "application";
 import { topmost } from "ui/frame";
-import { escapeRegexSymbols } from "utils/utils";
 import { Device } from "platform";
 
+import { isBlank } from "./lang-facade";
 import { ViewUtil } from "./view-util";
 import { APP_ROOT_VIEW, DEVICE, getRootPage } from "./platform-providers";
 import { NgView } from "./element-registry";
@@ -21,7 +20,6 @@ const COMPONENT_REGEX = /%COMP%/g;
 export const COMPONENT_VARIABLE = "%COMP%";
 export const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
 export const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;
-const ATTR_REPLACER = new RegExp(escapeRegexSymbols(CONTENT_ATTR), "g");
 const ATTR_SANITIZER = /-/g;
 
 @Injectable()
@@ -152,6 +150,7 @@ export class NativeScriptRenderer extends Renderer2 {
         // Seems to be called on component dispose only (router outlet)
         // TODO: handle this when we resolve routing and navigation.
     }
+
     setAttribute(view: NgView, name: string, value: string) {
         traceLog(`NativeScriptRenderer.setAttribute ${view} : ${name} = ${value}`);
         return this.setProperty(view, name, value);
@@ -229,58 +228,45 @@ class EmulatedRenderer extends NativeScriptRenderer {
     private hostAttr: string;
 
     constructor(
-        private component: RendererType2,
+        component: RendererType2,
         rootView: NgView,
         zone: NgZone,
         viewUtil: ViewUtil,
     ) {
         super(rootView, zone, viewUtil);
 
-        this.addStyles();
-        this.contentAttr = shimContentAttribute(component.id);
-        this.hostAttr = shimHostAttribute(component.id);
+        const componentId = component.id.replace(ATTR_SANITIZER, "_");
+        this.contentAttr = replaceNgAttribute(CONTENT_ATTR, componentId);
+        this.hostAttr = replaceNgAttribute(HOST_ATTR, componentId);
+        this.addStyles(component.styles, componentId);
     }
 
     applyToHost(view: NgView) {
         super.setAttribute(view, this.hostAttr, "");
     }
 
     appendChild(parent: any, newChild: NgView): void {
-        // Set an attribute to the view to scope component-specific css.
-        // The property name is pre-generated by Angular.
-        const cssAttribute = this.replaceNgAttribute(CONTENT_ATTR);
-        newChild[cssAttribute] = true;
-
         super.appendChild(parent, newChild);
     }
 
     createElement(parent: any, name: string): NgView {
         const view = super.createElement(parent, name);
+
+        // Set an attribute to the view to scope component-specific css.
+        // The property name is pre-generated by Angular.
         super.setAttribute(view, this.contentAttr, "");
 
         return view;
     }
 
-    private addStyles() {
-        this.component.styles
-            .map(s => s.toString())
-            .map(s => this.replaceNgAttribute(s))
+    private addStyles(styles: (string | any[])[], componentId: string) {
+        styles.map(s => s.toString())
+            .map(s => replaceNgAttribute(s, componentId))
             .forEach(addCss);
     }
 
-    private replaceNgAttribute(input: string): string {
-        return input.replace(ATTR_REPLACER , `_ng_content_${this.componentId}`);
-    }
-
-    private get componentId(): string {
-        return this.component.id.replace(ATTR_SANITIZER , "_");
-    }
-}
-
-function shimContentAttribute(componentShortId: string): string {
-    return CONTENT_ATTR.replace(COMPONENT_REGEX, componentShortId);
 }
 
-function shimHostAttribute(componentShortId: string): string {
-    return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId);
+function replaceNgAttribute(input: string, componentId: string): string {
+    return input.replace(COMPONENT_REGEX, componentId);
 }