diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
index 4f6d8a9b73..e983083a88 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
@@ -1,16 +1,13 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-body',
-  template: `
-    <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle" >
-      <ng-content></ng-content>
-    </div>`,
-  host: {
-    class: 'card-body',
-  }
+  template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
+    <ng-content></ng-content>
+  </div>`,
 })
 export class CardBodyComponent {
+  @HostBinding('class') componentClass = 'card-body';
   @Input() cardBodyClass: string;
   @Input() cardBodyStyle: string;
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
index ed5f0c64f3..d82a8725c1 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
@@ -1,19 +1,16 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-footer',
   template: `
-    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass" >
-      <ng-content ></ng-content>
+    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
+      <ng-content></ng-content>
     </div>
   `,
   styles: [],
-  host: {
-    class: 'card-footer',
-  }
 })
 export class CardFooterComponent {
+  @HostBinding('class') componentClass = 'card-footer';
   @Input() cardFooterStyle: string;
   @Input() cardFooterClass: string;
-
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
index 1ec374757c..7dfb75b2d9 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
@@ -1,18 +1,16 @@
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-header',
   template: `
     <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
-      <ng-content ></ng-content>
+      <ng-content></ng-content>
     </div>
   `,
   styles: [],
-  host: {
-    class: 'card-header',
-  }
 })
 export class CardHeaderComponent {
+  @HostBinding('class') componentClass = 'card-header';
   @Input() cardHeaderClass: string;
   @Input() cardHeaderStyle: string;
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts
index e7ecbfd881..44b8ff0eb5 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.directive.ts
@@ -1,9 +1,8 @@
-import { Directive } from "@angular/core";
+import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
   selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
-  host: {
-    class: 'card-header',
-  },
 })
-export class CardHeader {}
+export class CardHeaderDirective {
+  @HostBinding('class') directiveClass = 'card-header';
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts
index 384f9f3989..405ea1bb24 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-img-top.directive.ts
@@ -1,9 +1,8 @@
-import { Directive } from "@angular/core";
+import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
   selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
-  host: {
-    class: 'card-img-top',
-  },
 })
-export class CardImgTop {}
+export class CardImgTopDirective {
+  @HostBinding('class') directiveClass = 'card-img-top';
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts
index 862a439ea8..57ba722500 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-subtitle.directive.ts
@@ -1,9 +1,8 @@
-import { Directive } from "@angular/core";
+import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
   selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
-  host: {
-    class: 'card-subtitle',
-  },
 })
-export class CardSubtitle {}
+export class CardSubtitleDirective {
+  @HostBinding('class') directiveClass = 'card-subtitle';
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts
index 143a868b64..0bb92d9263 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.directive.ts
@@ -1,9 +1,8 @@
-import { Directive } from "@angular/core";
+import { Directive, HostBinding } from '@angular/core';
 
 @Directive({
   selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
-  host: {
-    class: 'card-title',
-  },
 })
-export class CardTitle {}
\ No newline at end of file
+export class CardTitleDirective {
+  @HostBinding('class') directiveClass = 'card-title';
+}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
index 149866bff0..fc5279be66 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
@@ -1,5 +1,4 @@
-import { Component, Directive, Input } from '@angular/core';
-
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'abp-card',
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts
index 1a3e62113c..ac7e28e568 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts
@@ -4,20 +4,20 @@ import { CardBodyComponent } from './card-body.component';
 import { CardComponent } from './card.component';
 import { CardHeaderComponent } from './card-header.component';
 import { CardFooterComponent } from './card-footer.component';
-import { CardTitle } from './card-title.directive';
-import { CardSubtitle } from './card-subtitle.directive';
-import { CardImgTop } from './card-img-top.directive';
-import { CardHeader } from './card-header.directive';
+import { CardTitleDirective } from './card-title.directive';
+import { CardSubtitleDirective } from './card-subtitle.directive';
+import { CardImgTopDirective } from './card-img-top.directive';
+import { CardHeaderDirective } from './card-header.directive';
 
 const declarationsWithExports = [
   CardComponent,
   CardBodyComponent,
   CardHeaderComponent,
   CardFooterComponent,
-  CardTitle,
-  CardSubtitle,
-  CardImgTop,
-  CardHeader,
+  CardTitleDirective,
+  CardSubtitleDirective,
+  CardImgTopDirective,
+  CardHeaderDirective,
 ];
 
 @NgModule({
@@ -25,4 +25,4 @@ const declarationsWithExports = [
   imports: [CommonModule],
   exports: [...declarationsWithExports],
 })
-export class CardModule { }
+export class CardModule {}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts
index d811014447..122de05ed8 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-header.directive.spec.ts
@@ -1,10 +1,10 @@
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
-import { CardHeader } from '../components';
+import { CardHeaderDirective } from '../components';
 
 describe('AbpCardHeaderDirective', () => {
-  let spectator: SpectatorHost<CardHeader>;
+  let spectator: SpectatorHost<CardHeaderDirective>;
 
-  const createHost = createHostFactory(CardHeader);
+  const createHost = createHostFactory(CardHeaderDirective);
 
   beforeEach(
     () =>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts
index 2a1ee9cff3..008d9a4528 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-img-top.directive.spec.ts
@@ -1,10 +1,10 @@
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
-import { CardImgTop } from '../components';
+import { CardImgTopDirective } from '../components';
 
 describe('AbpCardImgTopDirective', () => {
-  let spectator: SpectatorHost<CardImgTop>;
+  let spectator: SpectatorHost<CardImgTopDirective>;
 
-  const createHost = createHostFactory(CardImgTop);
+  const createHost = createHostFactory(CardImgTopDirective);
 
   beforeEach(
     () =>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts
index 4995067635..004beaecae 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-subtitle.directive.spec.ts
@@ -1,10 +1,10 @@
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
-import { CardSubtitle } from '../components';
+import { CardSubtitleDirective } from '../components';
 
 describe('AbpCardSubtitleDirective', () => {
-  let spectator: SpectatorHost<CardSubtitle>;
+  let spectator: SpectatorHost<CardSubtitleDirective>;
 
-  const createHost = createHostFactory(CardSubtitle);
+  const createHost = createHostFactory(CardSubtitleDirective);
 
   beforeEach(() => (spectator = createHost(`<p abpCardSubtitle>CardSubtitle</p>`)));
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts
index 10360e23aa..9b9688f9e0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card-title.directive.spec.ts
@@ -1,10 +1,10 @@
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator';
-import { CardTitle } from '../components';
+import { CardTitleDirective } from '../components';
 
 describe('AbpCardTitleDirective', () => {
-  let spectator: SpectatorHost<CardTitle>;
+  let spectator: SpectatorHost<CardTitleDirective>;
 
-  const createHost = createHostFactory(CardTitle);
+  const createHost = createHostFactory(CardTitleDirective);
 
   beforeEach(() => (spectator = createHost(`<h5 abpCardTitle>CardTitle</h5>`)));
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts
index 3dbc2156f1..a5c8a5c43b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/card.component.spec.ts
@@ -4,10 +4,10 @@ import {
   CardBodyComponent,
   CardFooterComponent,
   CardHeaderComponent,
-  CardHeader,
-  CardTitle,
-  CardImgTop,
-  CardSubtitle,
+  CardHeaderDirective,
+  CardTitleDirective,
+  CardImgTopDirective,
+  CardSubtitleDirective,
 } from '../components/card';
 
 describe('CardComponent', () => {
@@ -17,10 +17,10 @@ describe('CardComponent', () => {
     component: CardComponent,
     declarations: [
       CardHeaderComponent,
-      CardTitle,
-      CardSubtitle,
+      CardTitleDirective,
+      CardSubtitleDirective,
       CardBodyComponent,
-      CardImgTop,
+      CardImgTopDirective,
       CardFooterComponent,
     ],
   });