diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
index 6bac852cc2..26df9d06de 100644
--- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
+++ b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
@@ -859,6 +859,12 @@ describe('compiler compliance: styling', () => {
              'spec.ts': `
                 import {Directive, Component, NgModule, HostBinding} from '@angular/core';
 
+                @Directive({selector: '[myClassDir]'})
+                export class ClassDirective {
+                  @HostBinding('class')
+                  myClassMap = {red: true};
+                }
+
                 @Directive({selector: '[myWidthDir]'})
                 export class WidthDirective {
                   @HostBinding('style.width')
@@ -880,13 +886,13 @@ describe('compiler compliance: styling', () => {
                 @Component({
                   selector: 'my-component',
                   template: '
-                    <div myWidthDir myHeightDir></div>
+                    <div myWidthDir myHeightDir myClassDir></div>
                   ',
                 })
                 export class MyComponent {
                 }
 
-                @NgModule({declarations: [MyComponent, WidthDirective, HeightDirective]})
+                @NgModule({declarations: [MyComponent, WidthDirective, HeightDirective, ClassDirective]})
                 export class MyModule {}
             `
            }
@@ -898,6 +904,17 @@ describe('compiler compliance: styling', () => {
           const _c2 = ["bar"];
           const _c3 = ["height"];
           …
+          function ClassDirective_HostBindings(rf, ctx, elIndex) {
+            if (rf & 1) {
+              $r3$.ɵallocHostVars(1);
+              $r3$.ɵelementStyling(null, null, null, ctx);
+            }
+            if (rf & 2) {
+              $r3$.ɵelementStylingMap(elIndex, ctx.myClassMap, null, ctx);
+              $r3$.ɵelementStylingApply(elIndex, ctx);
+            }
+          }
+          …
           function WidthDirective_HostBindings(rf, ctx, elIndex) {
             if (rf & 1) {
               $r3$.ɵelementStyling(_c0, _c1, null, ctx);
diff --git a/packages/compiler/src/render3/view/styling.ts b/packages/compiler/src/render3/view/styling.ts
index 5b374fe22e..983a5f1db3 100644
--- a/packages/compiler/src/render3/view/styling.ts
+++ b/packages/compiler/src/render3/view/styling.ts
@@ -205,7 +205,7 @@ export class StylingBuilder {
         // can be processed during runtime. These initial class values are bound to
         // a constant because the inital class values do not change (since they're static).
         params.push(constantPool.getConstLiteral(initialClasses, true));
-      } else if (initialStyles || useSanitizer) {
+      } else if (initialStyles || useSanitizer || this._directiveExpr) {
         // no point in having an extra `null` value unless there are follow-up params
         params.push(o.NULL_EXPR);
       }