fix(core): set style property value to empty string instead of an invalid value (#49460)

alan-agius4 · atscott · commit d201fc2dec1a · 2023-03-28T11:35:39.000-07:00
Currently when the value of a styling property that has a unit is empty string a invalid value is generated. Example: `[style.width.px] = ""` will generate a value of `"px"`, when instead it should be `""`. This causes browser to reset the value to an empty string. This is however not the case in Domino with changes in angular/domino@bfc9114. This commit fixes the issues and generate correct values. PR Close #49460
diff --git a/packages/core/src/render3/instructions/styling.ts b/packages/core/src/render3/instructions/styling.ts
@@ -833,8 +833,11 @@ function isStylingValuePresent(value: any): boolean {
  * @param suffix
  */
 function normalizeSuffix(value: any, suffix: string|undefined|null): string|null|undefined|boolean {
-  if (value == null /** || value === undefined */) {
+  if (value == null || value === '') {
     // do nothing
+    // Do not add the suffix if the value is going to be empty.
+    // As it produce invalid CSS, which the browsers will automatically omit but Domino will not.
+    // Example: `"left": "px;"` instead of `"left": ""`.
   } else if (typeof suffix === 'string') {
     value = value + suffix;
   } else if (typeof value === 'object') {
