CardView: Overview basic demo for beta code samples (18zTg1oC) (DevExpress#29874)

Author: wdevfx

apps/demos/Demos/CardView/Overview/Angular/app/app.component.css

@@ -0,0 +1 @@
+

apps/demos/Demos/CardView/Overview/Angular/app/app.component.html

@@ -0,0 +1,34 @@
+<div class="demo-container">
+  <dx-card-view
+    [dataSource]="employees"
+    [keyExpr]="'ID'"
+    [cardsPerRow]="'auto'"
+    [cardMinWidth]="250"
+    [headerFilter]="headerFilterConfig"
+    [searchPanel]="searchPanelConfig"
+    [columnChooser]="columnChooserConfig"
+  >
+    <!-- Columns -->
+    <dxi-card-view-column
+      dataField="FullName"
+      allowHiding="false"
+    ></dxi-card-view-column>
+    <dxi-card-view-column dataField="Position"></dxi-card-view-column>
+    <dxi-card-view-column dataField="Department"></dxi-card-view-column>
+    <dxi-card-view-column dataField="Phone"></dxi-card-view-column>
+    <dxi-card-view-column dataField="Email"></dxi-card-view-column>
+    <!-- Card cover -->
+    <dxo-card-view-card-cover
+      [imageExpr]="getEmployeeImage"
+      [altExpr]="getEmployeeImageAltText"
+    ></dxo-card-view-card-cover>
+    <!-- Pager -->
+    <dxo-card-view-pager
+      [showInfo]="true"
+      [showNavigationButtons]="true"
+      [showPageSizeSelector]="true"
+    ></dxo-card-view-pager>
+    <!-- Selection -->
+    <dxo-card-view-selection mode="multiple"></dxo-card-view-selection>
+  </dx-card-view>
+</div>

apps/demos/Demos/CardView/Overview/Angular/app/app.component.ts

@@ -0,0 +1,77 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { DxCardViewModule } from 'devextreme-angular';
+import { AppService, Employee } from './app.service';
+
+if (!document.location.host.includes('localhost')) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-expect-error
+if (window && window.config?.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+const IMG_URL = 'https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos';
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
+})
+export class AppComponent {
+  employees: Employee[];
+
+  // TODO: Nested component does not exist
+  headerFilterConfig = {
+    visible: true,
+  };
+
+  // TODO: Nested component does not exist
+  searchPanelConfig = {
+    visible: true,
+  };
+
+  // TODO: Nested component does not exist
+  columnChooserConfig = {
+    enabled: true,
+    height: 340,
+    mode: 'select',
+    position: {
+      my: 'right top',
+      at: 'right bottom',
+      of: '.dx-cardview-column-chooser-button',
+    },
+    selection: {
+      selectByClick: true,
+    },
+  };
+
+  constructor(service: AppService) {
+    this.employees = service.getEmployees();
+  }
+
+  getEmployeeImage({ Picture }: Employee): string {
+    return `${IMG_URL}/${Picture}`;
+  }
+
+  getEmployeeImageAltText({ FullName }: Employee): string {
+    return `${FullName} picture`;
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxCardViewModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  providers: [AppService],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);