fix(*): Import IgxButtonDirective in services samples (#3909)

Author: gedinakova

src/app/services/export-csv/csv-export.component.html

@@ -1,7 +1,7 @@
 <p>
   Press the "Export CSV Data" button below to export an array as .csv file.<br />
-  <button (click)="exportCsvButtonHandler()">Export CSV Data</button>
+  <button igxButton="contained" (click)="exportCsvButtonHandler()">Export CSV Data</button>
   <br />
   Press the "Export TSV Data" button below to export an array as .tsv file.<br />
-  <button (click)="exportTsvButtonHandler()">Export TSV Data</button><br />
-</p>
+  <button igxButton="contained" (click)="exportTsvButtonHandler()">Export TSV Data</button><br />
+</p>

src/app/services/export-csv/csv-export.component.ts

@@ -2,11 +2,13 @@
 import { Component, inject } from '@angular/core';
 
 import { CsvFileTypes, IgxCsvExporterOptions, IgxCsvExporterService } from 'igniteui-angular/grids/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 @Component({
     selector: 'app-csv-export',
     styleUrls: ['./csv-export.component.scss'],
-    templateUrl: './csv-export.component.html'
+    templateUrl: './csv-export.component.html',
+    imports: [IgxButtonDirective]
 })
 export class CsvExportComponent {
   private csvExportService = inject(IgxCsvExporterService);

src/app/services/export-excel/excel-export.component.html

@@ -1,4 +1,4 @@
 <p>
   Press the "Export Data" button below to export an array as .xlsx file.<br />
-  <button (click)="exportButtonHandler()">Export Data</button><br />
+  <button igxButton="contained" (click)="exportButtonHandler()">Export Data</button><br />
 </p>

src/app/services/export-excel/excel-export.component.ts

@@ -2,11 +2,13 @@
 import { Component, inject } from '@angular/core';
 
 import { IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 @Component({
     selector: 'app-excel-export',
     styleUrls: ['./excel-export.component.scss'],
-    templateUrl: './excel-export.component.html'
+    templateUrl: './excel-export.component.html',
+    imports: [IgxButtonDirective]
 })
 export class ExcelExportComponent {
   private excelExportService = inject(IgxExcelExporterService);

src/app/services/transaction/transaction-base/transaction-base.component.ts

@@ -6,13 +6,14 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 import { WISHLIST, WishlistItem } from '../data';
 import { NgClass } from '@angular/common';
 import { TransactionBasePipe } from '../pipes/transaction-base.pipe';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 
 @Component({
     providers: [IgxTransactionService],
     selector: 'app-transaction-base',
     styleUrls: ['./transaction-base.component.scss'],
     templateUrl: 'transaction-base.component.html',
-    imports: [IgxCardComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, TransactionBasePipe]
+    imports: [IgxButtonDirective, IgxCardComponent, IgxListComponent, IgxListItemComponent, NgClass, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective, TransactionBasePipe]
 })
 export class TransactionBaseComponent {
     transactions = inject<IgxTransactionService<Transaction, State>>(IgxTransactionService);