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

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

Author: sis0k0

nativescript-angular/renderer.ts

@@ -20,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()
@@ -228,58 +227,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);
 }