create card component

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-body',
+  template: `<ng-content></ng-content>`,
+})
+export class CardBodyComponent {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-title',
+  template: `<ng-content></ng-content>`,
+})
+export class CardTitleComponent {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts

@@ -0,0 +1,27 @@
+import { Component, ContentChild, Input } from '@angular/core';
+import { CardBodyComponent } from './card-body.component';
+import { CardTitleComponent } from './card-title.component';
+
+@Component({
+  selector: 'abp-card',
+  template: `
+  <div class="card" [ngClass]="class" [ngStyle]="style" >
+  <div class="card-title" *ngIf="cardTitleTemplate">
+    <ng-content select="abp-card-title"></ng-content>
+  </div>
+  <div class="card-body" *ngIf="cardBodyTemplate">
+    <ng-content select="abp-card-body"></ng-content>
+  </div>
+</div>`,
+})
+export class CardComponent {
+  @Input() class:string
+
+  @Input() style:string
+
+  @ContentChild(CardBodyComponent)
+  cardBodyTemplate?: CardBodyComponent;
+
+  @ContentChild(CardTitleComponent)
+  cardTitleTemplate?: CardTitleComponent;
+}