Angular Card View - Search Panel

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxCardViewModule } from 'devextreme-angular'; import { Task, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ styleUrls: [`app/app.component.css`], selector: 'demo-app', templateUrl: './app.component.html', providers: [Service], imports: [ DxCardViewModule, ], }) export class AppComponent { tasks: Task[]; constructor(service: Service) { this.tasks = service.getTasks(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

import { Injectable } from '@angular/core'; export interface Task { Task_ID: number; Task_Assigned_Employee_ID: number; Task_Owner_ID: number; Task_Subject: string; Task_Start_Date: string; Task_Due_Date: string; Task_Status: string; Task_Priority: number; Task_Completion: number; } const tasks: Task[] = [{ 'Task_ID': 1, 'Task_Assigned_Employee_ID': 7, 'Task_Owner_ID': 1, 'Task_Subject': 'Prepare 2023 Financial', 'Task_Start_Date': '2023-01-15T00:00:00', 'Task_Due_Date': '2023-01-31T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 2, 'Task_Assigned_Employee_ID': 4, 'Task_Owner_ID': 1, 'Task_Subject': 'Prepare 2023 Marketing Plan', 'Task_Start_Date': '2023-01-01T00:00:00', 'Task_Due_Date': '2023-01-31T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 3, 'Task_Assigned_Employee_ID': 2, 'Task_Owner_ID': 1, 'Task_Subject': 'Update Personnel Files', 'Task_Start_Date': '2023-02-03T00:00:00', 'Task_Due_Date': '2023-02-28T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 4, 'Task_Assigned_Employee_ID': 2, 'Task_Owner_ID': 1, 'Task_Subject': 'Review Health Insurance Options Under the Affordable Care Act', 'Task_Start_Date': '2023-02-12T00:00:00', 'Task_Due_Date': '2023-04-25T00:00:00', 'Task_Status': 'In Progress', 'Task_Priority': 4, 'Task_Completion': 50, }, { 'Task_ID': 5, 'Task_Assigned_Employee_ID': 1, 'Task_Owner_ID': 2, 'Task_Subject': 'Choose between PPO and HMO Health Plan', 'Task_Start_Date': '2023-02-15T00:00:00', 'Task_Due_Date': '2023-04-15T00:00:00', 'Task_Status': 'In Progress', 'Task_Priority': 4, 'Task_Completion': 75, }, { 'Task_ID': 6, 'Task_Assigned_Employee_ID': 1, 'Task_Owner_ID': 4, 'Task_Subject': 'Google AdWords Strategy', 'Task_Start_Date': '2023-02-16T00:00:00', 'Task_Due_Date': '2023-02-28T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 7, 'Task_Assigned_Employee_ID': 1, 'Task_Owner_ID': 4, 'Task_Subject': 'New Brochures', 'Task_Start_Date': '2023-02-17T00:00:00', 'Task_Due_Date': '2023-02-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 8, 'Task_Assigned_Employee_ID': 28, 'Task_Owner_ID': 1, 'Task_Subject': '2023 Brochure Designs', 'Task_Start_Date': '2023-02-19T00:00:00', 'Task_Due_Date': '2023-02-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 9, 'Task_Assigned_Employee_ID': 29, 'Task_Owner_ID': 28, 'Task_Subject': 'Brochure Design Review', 'Task_Start_Date': '2023-02-19T00:00:00', 'Task_Due_Date': '2023-02-22T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 10, 'Task_Assigned_Employee_ID': 29, 'Task_Owner_ID': 28, 'Task_Subject': 'Website Re-Design Plan', 'Task_Start_Date': '2023-02-19T00:00:00', 'Task_Due_Date': '2023-02-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 11, 'Task_Assigned_Employee_ID': 4, 'Task_Owner_ID': 1, 'Task_Subject': 'Rollout of New Website and Marketing Brochures', 'Task_Start_Date': '2023-02-20T00:00:00', 'Task_Due_Date': '2023-02-28T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 12, 'Task_Assigned_Employee_ID': 8, 'Task_Owner_ID': 4, 'Task_Subject': 'Update Sales Strategy Documents', 'Task_Start_Date': '2023-02-20T00:00:00', 'Task_Due_Date': '2023-02-22T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 13, 'Task_Assigned_Employee_ID': 41, 'Task_Owner_ID': 8, 'Task_Subject': 'Create 2022 Sales Report', 'Task_Start_Date': '2023-02-20T00:00:00', 'Task_Due_Date': '2023-02-21T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 14, 'Task_Assigned_Employee_ID': 42, 'Task_Owner_ID': 41, 'Task_Subject': 'Direct vs Online Sales Comparison Report', 'Task_Start_Date': '2023-02-20T00:00:00', 'Task_Due_Date': '2023-02-22T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 15, 'Task_Assigned_Employee_ID': 4, 'Task_Owner_ID': 41, 'Task_Subject': 'Review 2022 Sales Report and Approve 2023 Plans', 'Task_Start_Date': '2023-02-23T00:00:00', 'Task_Due_Date': '2023-02-28T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 16, 'Task_Assigned_Employee_ID': 3, 'Task_Owner_ID': 1, 'Task_Subject': 'Deliver R&D Plans for 2023', 'Task_Start_Date': '2023-03-01T00:00:00', 'Task_Due_Date': '2023-03-10T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 17, 'Task_Assigned_Employee_ID': 32, 'Task_Owner_ID': 3, 'Task_Subject': 'Create 2023 R&D Plans', 'Task_Start_Date': '2023-03-01T00:00:00', 'Task_Due_Date': '2023-03-07T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 18, 'Task_Assigned_Employee_ID': 33, 'Task_Owner_ID': 32, 'Task_Subject': '2023 QA Strategy Report', 'Task_Start_Date': '2023-03-02T00:00:00', 'Task_Due_Date': '2023-03-05T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 19, 'Task_Assigned_Employee_ID': 31, 'Task_Owner_ID': 33, 'Task_Subject': '2023 Training Events', 'Task_Start_Date': '2023-03-02T00:00:00', 'Task_Due_Date': '2023-03-04T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 20, 'Task_Assigned_Employee_ID': 5, 'Task_Owner_ID': 31, 'Task_Subject': 'Approve Hiring of John Jeffers', 'Task_Start_Date': '2023-03-02T00:00:00', 'Task_Due_Date': '2023-03-12T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 21, 'Task_Assigned_Employee_ID': 2, 'Task_Owner_ID': 5, 'Task_Subject': 'Non-Compete Agreements', 'Task_Start_Date': '2023-03-12T00:00:00', 'Task_Due_Date': '2023-03-14T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 1, 'Task_Completion': 100, }, { 'Task_ID': 22, 'Task_Assigned_Employee_ID': 1, 'Task_Owner_ID': 2, 'Task_Subject': 'Update NDA Agreement', 'Task_Start_Date': '2023-03-14T00:00:00', 'Task_Due_Date': '2023-03-16T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 23, 'Task_Assigned_Employee_ID': 5, 'Task_Owner_ID': 2, 'Task_Subject': 'Update Employee Files with New NDA', 'Task_Start_Date': '2023-03-16T00:00:00', 'Task_Due_Date': '2023-03-26T00:00:00', 'Task_Status': 'Need Assistance', 'Task_Priority': 2, 'Task_Completion': 90, }, { 'Task_ID': 24, 'Task_Assigned_Employee_ID': 6, 'Task_Owner_ID': 5, 'Task_Subject': 'Sign Updated NDA', 'Task_Start_Date': '2023-03-20T00:00:00', 'Task_Due_Date': '2023-03-25T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 25, 'Task_Assigned_Employee_ID': 7, 'Task_Owner_ID': 5, 'Task_Subject': 'Sign Updated NDA', 'Task_Start_Date': '2023-03-20T00:00:00', 'Task_Due_Date': '2023-03-25T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 26, 'Task_Assigned_Employee_ID': 8, 'Task_Owner_ID': 5, 'Task_Subject': 'Sign Updated NDA', 'Task_Start_Date': '2023-03-20T00:00:00', 'Task_Due_Date': '2023-03-25T00:00:00', 'Task_Status': 'Need Assistance', 'Task_Priority': 3, 'Task_Completion': 25, }, { 'Task_ID': 27, 'Task_Assigned_Employee_ID': 9, 'Task_Owner_ID': 5, 'Task_Subject': 'Sign Updated NDA', 'Task_Start_Date': '2023-03-20T00:00:00', 'Task_Due_Date': '2023-03-25T00:00:00', 'Task_Status': 'In Progress', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 28, 'Task_Assigned_Employee_ID': 17, 'Task_Owner_ID': 9, 'Task_Subject': 'Submit Questions Regarding New NDA', 'Task_Start_Date': '2023-03-21T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 29, 'Task_Assigned_Employee_ID': 18, 'Task_Owner_ID': 9, 'Task_Subject': 'Submit Questions Regarding New NDA', 'Task_Start_Date': '2023-03-21T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 30, 'Task_Assigned_Employee_ID': 19, 'Task_Owner_ID': 9, 'Task_Subject': 'Submit Questions Regarding New NDA', 'Task_Start_Date': '2023-03-21T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Need Assistance', 'Task_Priority': 4, 'Task_Completion': 25, }, { 'Task_ID': 31, 'Task_Assigned_Employee_ID': 14, 'Task_Owner_ID': 10, 'Task_Subject': 'Submit Signed NDA', 'Task_Start_Date': '2023-03-22T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 32, 'Task_Assigned_Employee_ID': 13, 'Task_Owner_ID': 10, 'Task_Subject': 'Submit Signed NDA', 'Task_Start_Date': '2023-03-22T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 33, 'Task_Assigned_Employee_ID': 15, 'Task_Owner_ID': 10, 'Task_Subject': 'Submit Signed NDA', 'Task_Start_Date': '2023-03-22T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 34, 'Task_Assigned_Employee_ID': 16, 'Task_Owner_ID': 10, 'Task_Subject': 'Submit Signed NDA', 'Task_Start_Date': '2023-03-22T00:00:00', 'Task_Due_Date': '2023-03-24T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 35, 'Task_Assigned_Employee_ID': 7, 'Task_Owner_ID': 1, 'Task_Subject': 'Update Revenue Projections', 'Task_Start_Date': '2023-03-24T00:00:00', 'Task_Due_Date': '2023-04-07T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 36, 'Task_Assigned_Employee_ID': 8, 'Task_Owner_ID': 7, 'Task_Subject': 'Review Revenue Projections', 'Task_Start_Date': '2023-03-25T00:00:00', 'Task_Due_Date': '2023-04-06T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 37, 'Task_Assigned_Employee_ID': 41, 'Task_Owner_ID': 7, 'Task_Subject': 'Comment on Revenue Projections', 'Task_Start_Date': '2023-03-25T00:00:00', 'Task_Due_Date': '2023-04-03T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 38, 'Task_Assigned_Employee_ID': 42, 'Task_Owner_ID': 7, 'Task_Subject': 'Comment on Revenue Projections', 'Task_Start_Date': '2023-03-25T00:00:00', 'Task_Due_Date': '2023-04-03T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 39, 'Task_Assigned_Employee_ID': 45, 'Task_Owner_ID': 7, 'Task_Subject': 'Comment on Revenue Projections', 'Task_Start_Date': '2023-03-25T00:00:00', 'Task_Due_Date': '2023-04-03T00:00:00', 'Task_Status': 'Deferred', 'Task_Priority': 3, 'Task_Completion': 25, }, { 'Task_ID': 40, 'Task_Assigned_Employee_ID': 5, 'Task_Owner_ID': 11, 'Task_Subject': 'Provide New Health Insurance Docs', 'Task_Start_Date': '2023-03-28T00:00:00', 'Task_Due_Date': '2023-04-07T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 41, 'Task_Assigned_Employee_ID': 10, 'Task_Owner_ID': 11, 'Task_Subject': 'Review Changes to Health Insurance Coverage', 'Task_Start_Date': '2023-04-07T00:00:00', 'Task_Due_Date': '2023-04-30T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 42, 'Task_Assigned_Employee_ID': 14, 'Task_Owner_ID': 10, 'Task_Subject': 'Scan Health Insurance Forms', 'Task_Start_Date': '2023-04-15T00:00:00', 'Task_Due_Date': '2023-04-20T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }, { 'Task_ID': 43, 'Task_Assigned_Employee_ID': 15, 'Task_Owner_ID': 14, 'Task_Subject': 'Sign Health Insurance Forms', 'Task_Start_Date': '2023-04-16T00:00:00', 'Task_Due_Date': '2023-04-19T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 44, 'Task_Assigned_Employee_ID': 13, 'Task_Owner_ID': 14, 'Task_Subject': 'Sign Health Insurance Forms', 'Task_Start_Date': '2023-04-16T00:00:00', 'Task_Due_Date': '2023-04-19T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 45, 'Task_Assigned_Employee_ID': 16, 'Task_Owner_ID': 14, 'Task_Subject': 'Sign Health Insurance Forms', 'Task_Start_Date': '2023-04-16T00:00:00', 'Task_Due_Date': '2023-04-19T00:00:00', 'Task_Status': 'Deferred', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 46, 'Task_Assigned_Employee_ID': 18, 'Task_Owner_ID': 9, 'Task_Subject': 'Follow up with West Coast Stores', 'Task_Start_Date': '2023-04-18T00:00:00', 'Task_Due_Date': '2024-02-04T00:00:00', 'Task_Status': 'In Progress', 'Task_Priority': 3, 'Task_Completion': 95, }, { 'Task_ID': 47, 'Task_Assigned_Employee_ID': 17, 'Task_Owner_ID': 9, 'Task_Subject': 'Follow up with East Coast Stores', 'Task_Start_Date': '2023-04-18T00:00:00', 'Task_Due_Date': '2024-01-04T00:00:00', 'Task_Status': 'In Progress', 'Task_Priority': 3, 'Task_Completion': 85, }, { 'Task_ID': 48, 'Task_Assigned_Employee_ID': 19, 'Task_Owner_ID': 9, 'Task_Subject': 'Send Email to Customers about Recall', 'Task_Start_Date': '2023-04-18T00:00:00', 'Task_Due_Date': '2023-04-30T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 4, 'Task_Completion': 100, }, { 'Task_ID': 49, 'Task_Assigned_Employee_ID': 9, 'Task_Owner_ID': 7, 'Task_Subject': 'Submit Refund Report for 2023 Recall', 'Task_Start_Date': '2023-04-25T00:00:00', 'Task_Due_Date': '2023-05-05T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 3, 'Task_Completion': 100, }, { 'Task_ID': 50, 'Task_Assigned_Employee_ID': 2, 'Task_Owner_ID': 7, 'Task_Subject': 'Give Final Approval for Refunds', 'Task_Start_Date': '2023-05-05T00:00:00', 'Task_Due_Date': '2023-05-15T00:00:00', 'Task_Status': 'Completed', 'Task_Priority': 2, 'Task_Completion': 100, }]; @Injectable() export class Service { getTasks() { return tasks; } }

<!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>