fix(pdf demo): removing the hallucinated input groups

Author: kdinev

src/app/app.component.ts

@@ -421,6 +421,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid Export'
         },
+        {
+            link: '/gridPdfExport',
+            icon: 'view_column',
+            name: 'Grid PDF Export'
+        },
         {
             link: '/gridSearch',
             icon: 'view_column',

src/app/grid-pdf-export/grid-pdf-export.sample.html

@@ -8,7 +8,7 @@ <h2 class="sample-title">PDF Export Service Demo</h2>
     <!-- Export Configuration Panel -->
     <div class="config-panel">
         <h3>Export Options Configuration</h3>
-        
+
         <div class="config-row">
             <igx-input-group>
                 <label igxLabel>File Name</label>
@@ -17,24 +17,20 @@ <h3>Export Options Configuration</h3>
         </div>
 
         <div class="config-row">
-            <igx-input-group>
+            <igx-select [(ngModel)]="pageOrientation">
                 <label igxLabel>Page Orientation</label>
-                <igx-select [(ngModel)]="pageOrientation">
-                    <igx-select-item value="portrait">Portrait</igx-select-item>
-                    <igx-select-item value="landscape">Landscape</igx-select-item>
-                </igx-select>
-            </igx-input-group>
+                <igx-select-item value="portrait">Portrait</igx-select-item>
+                <igx-select-item value="landscape">Landscape</igx-select-item>
+            </igx-select>
         </div>
 
         <div class="config-row">
-            <igx-input-group>
+            <igx-select [(ngModel)]="pageSize">
                 <label igxLabel>Page Size</label>
-                <igx-select [(ngModel)]="pageSize">
-                    @for (size of pageSizes; track size) {
-                        <igx-select-item [value]="size">{{ size.toUpperCase() }}</igx-select-item>
-                    }
-                </igx-select>
-            </igx-input-group>
+                @for (size of pageSizes; track size) {
+                    <igx-select-item [value]="size">{{ size.toUpperCase() }}</igx-select-item>
+                }
+            </igx-select>
         </div>
 
         <div class="config-row">
@@ -57,7 +53,7 @@ <h3>Regular Grid</h3>
                 Export to PDF
             </button>
         </div>
-        
+
         <igx-grid #grid1 [data]="gridData" [autoGenerate]="false" height="400px" width="100%">
             <igx-column field="ID" header="ID" [width]="'80px'"></igx-column>
             <igx-column field="Name" header="Product Name" [width]="'200px'"></igx-column>
@@ -76,8 +72,8 @@ <h3>Tree Grid (with Hierarchy)</h3>
                 Export to PDF
             </button>
         </div>
-        
-        <igx-tree-grid #treeGrid [data]="treeGridData" [autoGenerate]="false" 
+
+        <igx-tree-grid #treeGrid [data]="treeGridData" [autoGenerate]="false"
                        primaryKey="ID" foreignKey="ParentID" height="400px" width="100%">
             <igx-column field="ID" header="ID" [width]="'100px'"></igx-column>
             <igx-column field="Name" header="Department Name" [width]="'300px'"></igx-column>
@@ -93,13 +89,13 @@ <h3>Hierarchical Grid</h3>
                 Export to PDF
             </button>
         </div>
-        
-        <igx-hierarchical-grid #hierarchicalGrid [data]="hierarchicalGridData" 
+
+        <igx-hierarchical-grid #hierarchicalGrid [data]="hierarchicalGridData"
                                [autoGenerate]="false" height="400px" width="100%">
             <igx-column field="ID" header="ID" [width]="'80px'"></igx-column>
             <igx-column field="CompanyName" header="Company" [width]="'250px'"></igx-column>
             <igx-column field="Revenue" header="Revenue" dataType="currency" [width]="'150px'"></igx-column>
-            
+
             <igx-row-island [key]="'Employees'" [autoGenerate]="false">
                 <igx-column field="ID" header="Employee ID" [width]="'120px'"></igx-column>
                 <igx-column field="Name" header="Name" [width]="'200px'"></igx-column>
@@ -117,7 +113,7 @@ <h4>How to Use:</h4>
             <li>The PDF will be downloaded with your configured settings</li>
             <li>Tree and Hierarchical grids will show indentation in the exported PDF</li>
         </ol>
-        
+
         <h4>Key Features:</h4>
         <ul>
             <li><strong>Direct API Usage:</strong> Uses IgxPdfExporterService.export() method directly</li>

src/app/grid-pdf-export/grid-pdf-export.sample.ts

@@ -1,9 +1,9 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { 
-    IgxGridComponent, 
-    IgxColumnComponent, 
-    IgxPdfExporterService, 
+import {
+    IgxGridComponent,
+    IgxColumnComponent,
+    IgxPdfExporterService,
     IgxPdfExporterOptions,
     IgxTreeGridComponent,
     IgxHierarchicalGridComponent,
@@ -39,6 +39,8 @@ import {
     providers: [IgxPdfExporterService]
 })
 export class GridPdfExportSampleComponent {
+    private pdfExporter = inject(IgxPdfExporterService);
+
     @ViewChild('grid1', { static: true })
     public grid1: IgxGridComponent;
 
@@ -100,11 +102,8 @@ export class GridPdfExportSampleComponent {
     public pageSize = 'a4';
     public showTableBorders = true;
     public fontSize = 10;
-
     public pageSizes = ['a3', 'a4', 'a5', 'letter', 'legal'];
 
-    constructor(private pdfExporter: IgxPdfExporterService) {}
-
     public exportGrid() {
         const options = this.createExportOptions();
         this.pdfExporter.export(this.grid1, options);