Angular Card View - Overview

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core'; import { DxCardViewModule, DxCardViewComponent, DxButtonModule } from 'devextreme-angular'; import notify from 'devextreme/ui/notify'; import { AppService, Employee } from './app.service'; if (!document.location.host.includes('localhost')) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxCardViewModule, DxButtonModule, ], }) export class AppComponent { @ViewChild(DxCardViewComponent, { static: true }) cardView: DxCardViewComponent; employees: Employee[]; constructor(service: AppService) { this.employees = service.getEmployees(); } imageExpr({ First_Name, Last_Name }: Employee): string { return `../../../../images/employees/new/${First_Name} ${Last_Name}.jpg`; } altExpr({ First_Name, Last_Name }: Employee): string { return `Photo of ${First_Name} ${Last_Name}`; } calculateFullName({ First_Name, Last_Name }: Employee): string { return `${First_Name} ${Last_Name}`; } calculateAddress({ State, City }: Employee): string { return `${City}, ${State}`; } showNotify(text: string) { notify({ message: `The "${text}" button is clicked.`, maxWidth: 560, }); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), AppService, ], });

.card-footer { display: flex; padding: 12px; gap: 8px; } .card-footer > * { flex-grow: 1; width: 100% } .status { display: flex; align-items: center; } .status--salaried { color: var(--dx-color-success); } .status--commission { color: var(--dx-color-warning); } .status--terminated { color: var(--dx-color-danger); } .indicator { background-color: currentcolor; margin-right: 8px; border-radius: 50%; height: 12px; width: 12px; }

import { Injectable } from '@angular/core'; export interface Employee { ID: number; First_Name: string; Last_Name: string; Prefix: string; Title: string; City: string; State: string; Email: string; Mobile_Phone: string; Birth_Date: string; Hire_Date: string; Department: string; Status: string; } const employees: Employee[] = [{ ID: 3, First_Name: 'Arthur', Last_Name: 'Miller', Prefix: 'Mr.', Title: 'CTO', City: 'Los Angeles', State: 'California', Email: 'arthurm@dx-email.com', Mobile_Phone: '(310) 555-8583', Birth_Date: '1972-07-11', Hire_Date: '2007-12-18', Status: 'Salaried', Department: 'Management', }, { ID: 4, First_Name: 'Robert', Last_Name: 'Reagan', Prefix: 'Mr.', Title: 'CMO', City: 'Pasadena', State: 'California', Email: 'robertr@dx-email.com', Mobile_Phone: '(818) 555-2387', Birth_Date: '1974-09-07', Hire_Date: '2002-11-08', Status: 'Salaried', Department: 'Management', }, { ID: 5, First_Name: 'Greta', Last_Name: 'Sims', Prefix: 'Ms.', Title: 'HR Manager', City: 'Alhambra', State: 'California', Email: 'gretas@dx-email.com', Mobile_Phone: '(818) 555-6546', Birth_Date: '1977-11-22', Hire_Date: '1998-04-23', Status: 'Salaried', Department: 'Human Resources', }, { ID: 6, First_Name: 'Brett', Last_Name: 'Wade', Prefix: 'Mr.', Title: 'IT Manager', City: 'San Marino', State: 'California', Email: 'brettw@dx-email.com', Mobile_Phone: '(626) 555-0358', Birth_Date: '1968-12-01', Hire_Date: '2009-03-06', Status: 'Salaried', Department: 'IT', }, { ID: 7, First_Name: 'Sandra', Last_Name: 'Johnson', Prefix: 'Mrs.', Title: 'Controller', City: 'Long Beach', State: 'California', Email: 'sandraj@dx-email.com', Mobile_Phone: '(562) 555-2082', Birth_Date: '1974-11-15', Hire_Date: '2005-05-11', Status: 'Salaried', Department: 'Human Resources', }, { ID: 10, First_Name: 'Kevin', Last_Name: 'Carter', Prefix: 'Mr.', Title: 'Shipping Manager', City: 'Los Angeles', State: 'California', Email: 'kevinc@dx-email.com', Mobile_Phone: '(213) 555-2840', Birth_Date: '1978-01-09', Hire_Date: '2009-08-11', Status: 'Salaried', Department: 'Shipping', }, { ID: 14, First_Name: 'Victor', Last_Name: 'Norris', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'victorn@dx-email.com', Mobile_Phone: '(213) 555-9278', Birth_Date: '1986-07-23', Hire_Date: '2012-07-23', Status: 'Salaried', Department: 'Shipping', }, { ID: 15, First_Name: 'Mary', Last_Name: 'Stern', Prefix: 'Ms.', Title: 'Shipping Assistant', City: 'Glendale', State: 'California', Email: 'marys@dx-email.com', Mobile_Phone: '(818) 555-7857', Birth_Date: '1982-04-08', Hire_Date: '2012-08-12', Status: 'Salaried', Department: 'Shipping', }, { ID: 16, First_Name: 'Robin', Last_Name: 'Cosworth', Prefix: 'Mrs.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'robinc@dx-email.com', Mobile_Phone: '(818) 555-0942', Birth_Date: '1981-06-12', Hire_Date: '2012-09-01', Status: 'Salaried', Department: 'Shipping', }, { ID: 17, First_Name: 'Kelly', Last_Name: 'Rodriguez', Prefix: 'Ms.', Title: 'Support Assistant', City: 'Glendale', State: 'California', Email: 'kellyr@dx-email.com', Mobile_Phone: '(818) 555-9248', Birth_Date: '1988-05-11', Hire_Date: '2012-10-13', Status: 'Salaried', Department: 'Support', }, { ID: 18, First_Name: 'James', Last_Name: 'Anderson', Prefix: 'Mr.', Title: 'Support Assistant', City: 'Los Angeles', State: 'California', Email: 'jamesa@dx-email.com', Mobile_Phone: '(323) 555-4702', Birth_Date: '1987-01-29', Hire_Date: '2012-10-18', Status: 'Salaried', Department: 'Support', }, { ID: 20, First_Name: 'Olivia', Last_Name: 'Peyton', Prefix: 'Mrs.', Title: 'Sales Assistant', City: 'San Pedro', State: 'California', Email: 'oliviap@dx-email.com', Mobile_Phone: '(310) 555-2728', Birth_Date: '1981-06-03', Hire_Date: '2012-05-14', Status: 'Salaried', Department: 'Sales', }, { ID: 21, First_Name: 'Taylor', Last_Name: 'Riley', Prefix: 'Mr.', Title: 'Network Admin', City: 'West Hollywood', State: 'California', Email: 'taylorr@dx-email.com', Mobile_Phone: '(310) 555-7276', Birth_Date: '1982-08-14', Hire_Date: '2012-04-14', Status: 'Salaried', Department: 'IT', }, { ID: 22, First_Name: 'Amelia', Last_Name: 'Harper', Prefix: 'Mrs.', Title: 'Network Admin', City: 'Los Angeles', State: 'California', Email: 'ameliah@dx-email.com', Mobile_Phone: '(213) 555-4276', Birth_Date: '1983-11-19', Hire_Date: '2011-02-10', Status: 'Salaried', Department: 'IT', }, { ID: 25, First_Name: 'Karen', Last_Name: 'Goodson', Prefix: 'Miss', Title: 'Programmer', City: 'South Pasadena', State: 'California', Email: 'kareng@dx-email.com', Mobile_Phone: '(626) 555-0908', Birth_Date: '1987-04-26', Hire_Date: '2011-03-14', Status: 'Salaried', Department: 'IT', }, { ID: 26, First_Name: 'Marcus', Last_Name: 'Orbison', Prefix: 'Mr.', Title: 'Travel Coordinator', City: 'Los Angeles', State: 'California', Email: 'marcuso@dx-email.com', Mobile_Phone: '(213) 555-7098', Birth_Date: '1982-03-02', Hire_Date: '2005-05-19', Status: 'Salaried', Department: 'Human Resources', }, { ID: 28, First_Name: 'Morgan', Last_Name: 'Kennedy', Prefix: 'Mrs.', Title: 'Graphic Designer', City: 'San Fernando Valley', State: 'California', Email: 'morgank@dx-email.com', Mobile_Phone: '(818) 555-8238', Birth_Date: '1984-07-17', Hire_Date: '2012-01-11', Status: 'Salaried', Department: 'IT', }, { ID: 29, First_Name: 'Violet', Last_Name: 'Bailey', Prefix: 'Ms.', Title: 'Jr Graphic Designer', City: 'La Canada', State: 'California', Email: 'violetb@dx-email.com', Mobile_Phone: '(818) 555-2478', Birth_Date: '1985-06-10', Hire_Date: '2012-01-19', Status: 'Salaried', Department: 'IT', }, { ID: 32, First_Name: 'Bart', Last_Name: 'Arnaz', Prefix: 'Mr.', Title: 'Director of Engineering', City: 'Irvine', State: 'California', Email: 'barta@dx-email.com', Mobile_Phone: '(714) 555-2000', Birth_Date: '1979-11-01', Hire_Date: '2008-06-29', Status: 'Salaried', Department: 'Engineering', }, { ID: 33, First_Name: 'Leah', Last_Name: 'Simpson', Prefix: 'Mrs.', Title: 'Test Coordinator', City: 'Whittier', State: 'California', Email: 'leahs@dx-email.com', Mobile_Phone: '(562) 559-5830', Birth_Date: '1983-04-19', Hire_Date: '2009-02-14', Status: 'Salaried', Department: 'Engineering', }, { ID: 36, First_Name: 'Samantha', Last_Name: 'Piper', Prefix: 'Ms.', Title: 'Engineer', City: 'Los Angeles', State: 'California', Email: 'samanthap@dx-email.com', Mobile_Phone: '(323) 555-4512', Birth_Date: '1984-12-01', Hire_Date: '2008-01-22', Status: 'Salaried', Department: 'Engineering', }, { ID: 38, First_Name: 'Terry', Last_Name: 'Bradley', Prefix: 'Mr.', Title: 'QA Engineer', City: 'Simi Valley', State: 'California', Email: 'terryb@dx-email.com', Mobile_Phone: '(805) 555-2788', Birth_Date: '1984-01-09', Hire_Date: '2007-10-18', Status: 'Salaried', Department: 'Engineering', }, { ID: 40, First_Name: 'Lucy', Last_Name: 'Ball', Prefix: 'Ms.', Title: 'Sales Assistant', City: 'Pacific Palisades', State: 'California', Email: 'lucyb@dx-email.com', Mobile_Phone: '(310) 555-3357', Birth_Date: '1986-08-09', Hire_Date: '2006-07-19', Status: 'Salaried', Department: 'Sales', }, { ID: 44, First_Name: 'Clark', Last_Name: 'Morgan', Prefix: 'Mr.', Title: 'Retail Sales Manager', City: 'Martinez', State: 'California', Email: 'clarkm@dx-email.com', Mobile_Phone: '(925) 555-2525', Birth_Date: '1988-04-07', Hire_Date: '2012-04-11', Status: 'Commission', Department: 'Sales', }, { ID: 45, First_Name: 'Todd', Last_Name: 'Hoffman', Prefix: 'Mr.', Title: 'Retail Sales Manager', City: 'Livermore', State: 'California', Email: 'toddh@dx-email.com', Mobile_Phone: '(925) 555-3579', Birth_Date: '1987-03-25', Hire_Date: '2012-04-19', Status: 'Commission', Department: 'Sales', }, { ID: 47, First_Name: 'Lincoln', Last_Name: 'Bartlett', Prefix: 'Mr.', Title: 'Sales Assistant', City: 'Los Angeles', State: 'California', Email: 'lincolnb@dx-email.com', Mobile_Phone: '(213) 555-8272', Birth_Date: '1990-08-02', Hire_Date: '2012-05-11', Status: 'Salaried', Department: 'Sales', }, { ID: 48, First_Name: 'Brad', Last_Name: 'Farkus', Prefix: 'Mr.', Title: 'Engineer', City: 'Los Angeles', State: 'California', Email: 'bradf@dx-email.com', Mobile_Phone: '(213) 555-3626', Birth_Date: '1991-03-17', Hire_Date: '2010-04-15', Status: 'Terminated', Department: 'Engineering', }, { ID: 50, First_Name: 'Dallas', Last_Name: 'Lou', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'dallas@dx-email.com', Mobile_Phone: '(213) 555-8357', Birth_Date: '1994-08-19', Hire_Date: '2012-06-18', Status: 'Terminated', Department: 'Shipping', }, { ID: 51, First_Name: 'Stu', Last_Name: 'Pizaro', Prefix: 'Mr.', Title: 'Engineer', City: 'Los Angeles', State: 'California', Email: 'stu@dx-email.com', Mobile_Phone: '(213) 555-2552', Birth_Date: '1985-09-11', Hire_Date: '2011-07-19', Status: 'Terminated', Department: 'Engineering', }]; @Injectable({ providedIn: 'root', }) export class AppService { getEmployees(): Employee[] { return employees; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>