diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
index a28e394246460..4d31b998dbcdc 100644
--- a/packages/core/src/render3/instructions/shared.ts
+++ b/packages/core/src/render3/instructions/shared.ts
@@ -31,10 +31,11 @@ import {BINDING_INDEX, CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DECLARATION_VIE
 import {assertNodeOfPossibleTypes} from '../node_assert';
 import {isNodeMatchingSelectorList} from '../node_selector_matcher';
 import {ActiveElementFlags, executeElementExitFn, getBindingsEnabled, getCheckNoChangesMode, getIsParent, getPreviousOrParentTNode, getSelectedIndex, hasActiveElementFlag, incrementActiveDirectiveId, namespaceHTMLInternal, selectView, setActiveHostElement, setBindingRoot, setCheckNoChangesMode, setCurrentDirectiveDef, setCurrentQueryIndex, setPreviousOrParentTNode, setSelectedIndex} from '../state';
-import {renderStylingMap} from '../styling/bindings';
+import {applyStylingMapDirectly, renderStylingMap, writeStylingValueDirectly} from '../styling/bindings';
 import {NO_CHANGE} from '../tokens';
 import {isAnimationProp} from '../util/attrs_utils';
 import {INTERPOLATION_DELIMITER, renderStringify, stringifyForError} from '../util/misc_utils';
+import {getInitialStylingValue} from '../util/styling_utils';
 import {getLViewParent} from '../util/view_traversal_utils';
 import {getComponentLViewByIndex, getNativeByIndex, getNativeByTNode, getTNode, isCreationMode, readPatchedLView, resetPreOrderHookFlags, unwrapRNode, viewAttachedToChangeDetector} from '../util/view_utils';
 
@@ -1853,6 +1854,12 @@ export function textBindingInternal(lView: LView, index: number, value: string):
  * style and class entries to the element.
  */
 export function renderInitialStyling(renderer: Renderer3, native: RElement, tNode: TNode) {
-  renderStylingMap(renderer, native, tNode.classes, true);
-  renderStylingMap(renderer, native, tNode.styles, false);
+  if (tNode.classes) {
+    const classes = getInitialStylingValue(tNode.classes);
+    writeStylingValueDirectly(renderer, native, classes, true, null);
+  }
+  if (tNode.styles) {
+    const styles = getInitialStylingValue(tNode.styles);
+    writeStylingValueDirectly(renderer, native, styles, false, null);
+  }
 }
diff --git a/packages/core/src/render3/styling/bindings.ts b/packages/core/src/render3/styling/bindings.ts
index 1cfba40ff7c27..65a57a0e49aba 100644
--- a/packages/core/src/render3/styling/bindings.ts
+++ b/packages/core/src/render3/styling/bindings.ts
@@ -672,19 +672,7 @@ export function applyStylingMapDirectly(
     if (writeToAttrDirectly) {
       const initialValue =
           hasInitial && !bindingValueContainsInitial ? getInitialStylingValue(context) : null;
-      if (isClassBased) {
-        let valueToApply = typeof value === 'string' ? value : objectToClassName(value);
-        if (initialValue !== null) {
-          valueToApply = initialValue + ' ' + valueToApply;
-        }
-        setClassName(renderer, element, valueToApply);
-      } else {
-        let valueToApply = forceStylesAsString(value as{[key: string]: any}, true);
-        if (initialValue !== null) {
-          valueToApply = initialValue + ';' + valueToApply;
-        }
-        setStyleAttr(renderer, element, valueToApply);
-      }
+      writeStylingValueDirectly(renderer, element, value, isClassBased, initialValue);
     } else {
       const applyFn = isClassBased ? setClass : setStyle;
       const map = value as StylingMapArray;
@@ -721,6 +709,24 @@ export function applyStylingMapDirectly(
   }
 }
 
+export function writeStylingValueDirectly(
+    renderer: any, element: RElement, value: {[key: string]: any} | string | null,
+    isClassBased: boolean, initialValue: string | null) {
+  if (isClassBased) {
+    let valueToApply = typeof value === 'string' ? value : objectToClassName(value);
+    if (initialValue !== null) {
+      valueToApply = initialValue + ' ' + valueToApply;
+    }
+    setClassName(renderer, element, valueToApply);
+  } else {
+    let valueToApply = typeof value === 'string' ? value : forceStylesAsString(value, true);
+    if (initialValue !== null) {
+      valueToApply = initialValue + ';' + valueToApply;
+    }
+    setStyleAttr(renderer, element, valueToApply);
+  }
+}
+
 /**
  * Applies the provided styling prop/value to the element directly (without context resolution).
  *
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
index 58ce0ef3baecb..54a03b2752bf8 100644
--- a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -107,9 +107,6 @@
   {
     "name": "RENDERER_FACTORY"
   },
-  {
-    "name": "RendererStyleFlags3"
-  },
   {
     "name": "SANITIZER"
   },
@@ -257,6 +254,9 @@
   {
     "name": "findDirectiveMatches"
   },
+  {
+    "name": "forceStylesAsString"
+  },
   {
     "name": "generateExpandoInstructionBlock"
   },
@@ -392,6 +392,9 @@
   {
     "name": "hasTagAndTypeMatch"
   },
+  {
+    "name": "hyphenate"
+  },
   {
     "name": "includeViewProviders"
   },
@@ -509,6 +512,9 @@
   {
     "name": "noSideEffects"
   },
+  {
+    "name": "objectToClassName"
+  },
   {
     "name": "postProcessBaseDirective"
   },
@@ -554,9 +560,6 @@
   {
     "name": "renderStringify"
   },
-  {
-    "name": "renderStylingMap"
-  },
   {
     "name": "renderView"
   },
@@ -591,7 +594,7 @@
     "name": "setBindingRoot"
   },
   {
-    "name": "setClass"
+    "name": "setClassName"
   },
   {
     "name": "setCurrentDirectiveDef"
@@ -633,7 +636,7 @@
     "name": "setSelectedIndex"
   },
   {
-    "name": "setStyle"
+    "name": "setStyleAttr"
   },
   {
     "name": "setTNodeAndViewData"
@@ -662,6 +665,9 @@
   {
     "name": "viewAttachedToChangeDetector"
   },
+  {
+    "name": "writeStylingValueDirectly"
+  },
   {
     "name": "ɵɵdefineComponent"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
index 02ba8c6a28b80..736a7c6063ec7 100644
--- a/packages/core/test/bundling/todo/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -581,6 +581,9 @@
   {
     "name": "flushStyling"
   },
+  {
+    "name": "forceStylesAsString"
+  },
   {
     "name": "forwardRef"
   },
@@ -836,6 +839,9 @@
   {
     "name": "hasValueChanged"
   },
+  {
+    "name": "hyphenate"
+  },
   {
     "name": "includeViewProviders"
   },
@@ -1058,6 +1064,9 @@
   {
     "name": "normalizeBitMaskValue"
   },
+  {
+    "name": "objectToClassName"
+  },
   {
     "name": "patchConfig"
   },
@@ -1133,9 +1142,6 @@
   {
     "name": "renderStringify"
   },
-  {
-    "name": "renderStylingMap"
-  },
   {
     "name": "renderView"
   },
@@ -1193,6 +1199,9 @@
   {
     "name": "setClass"
   },
+  {
+    "name": "setClassName"
+  },
   {
     "name": "setCurrentDirectiveDef"
   },
@@ -1247,6 +1256,9 @@
   {
     "name": "setStyle"
   },
+  {
+    "name": "setStyleAttr"
+  },
   {
     "name": "setTNodeAndViewData"
   },
@@ -1328,6 +1340,9 @@
   {
     "name": "wrapListener"
   },
+  {
+    "name": "writeStylingValueDirectly"
+  },
   {
     "name": "ɵɵadvance"
   },