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).
  *