Improving expert view

src/app/module/components/pro-view/pro-view.component.html

@@ -66,33 +66,34 @@
   </mat-form-field>
 </form>
 
-<div class="flex flex-wrap w-full bg-black justify-center sm:justify-between
-             [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:h-16  [&>*]:p-2 [&>*]:bg-slate-600">
+<div class="flex flex-wrap w-full justify-center sm:justify-between
+             [&>*]:w-full [&>*]:sm:w-1/4  [&>*]:h-16  [&>*]:p-2 ">
 
   <div class="">
-    <section class="bg-slate-100 h-full ">
-      <p>Check me!</p>
-      <mat-checkbox class="example-margin"></mat-checkbox>
+    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
+      <mat-checkbox [(ngModel)]="isChecked" class="m-2">Select Me</mat-checkbox>
     </section>
   </div>
 
   <div class="">
-    <div class="bg-slate-50 h-full">
-
-    </div>
+    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
+      <mat-checkbox class="m-2">Select Me</mat-checkbox>
+    </section>
   </div>
 
   <div class="">
-    <div class="bg-slate-50 h-full">
-
-    </div>
+    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
+      <mat-checkbox class="m-2">Select Me</mat-checkbox>
+    </section>
   </div>
 
   <div class="">
-    <div class="bg-slate-50 h-full">
-    </div>
+    <section class="bg-slate-100 h-full w-full flex items-center rounded-2xl">
+      <mat-checkbox class="m-2">Select Me</mat-checkbox>
+    </section>
   </div>
 
-
-
 </div>
+<button (click)="downloadCSV()">Download</button>
+
+{{isChecked}}

src/app/module/components/pro-view/pro-view.component.ts

@@ -25,6 +25,14 @@ export class ProViewComponent {
   toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
   selected: string[] = []
 
+  isChecked = false;
+
+  data: any[] = [
+    { name: 'John', age: 28, city: 'New York' },
+    { name: 'Jane', age: 35, city: 'London' },
+    { name: 'Jim', age: 42, city: 'Paris' },
+  ];
+
   ngOnInit() {
     this.filteredStation = this.stationControl.valueChanges.pipe(
       startWith(''),
@@ -54,5 +62,34 @@ export class ProViewComponent {
     }
   }
 
+  convertToCSV(data: any[]){
+    const rows = [];
+
+    // Create the header row
+    const header = Object.keys(data[0]).join(',');
+    rows.push(header);
+
+    // Create the data rows
+    data.forEach(item => {
+      const row = Object.values(item).join(',');
+      rows.push(row);
+    });
+    const csv = rows.join('\n');
+
+    return csv;
+  }
+
+  downloadCSV() {
+    const csv = this.convertToCSV(this.data);
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
 
+    // Create a link element and click it to trigger the download
+    const a = document.createElement('a');
+    a.style.display = 'none';
+    a.href = url;
+    a.download = 'data.csv';
+    document.body.appendChild(a);
+    a.click();
+  }
 }