added icon to contacts and link to outlook

IgniteUI · Nov 25, 2024 · ed9665a · ed9665a
1 parent b36d793
commit ed9665a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/projects/HR-Portal/src/app/tree-grid1/tree-grid1.component.html b/projects/HR-Portal/src/app/tree-grid1/tree-grid1.component.html
@@ -1,13 +1,3 @@
-<p>
-  IgxTreeGrid with optional features like sorting, filtering, row editing, etc.<br />
-    You can read more about configuring the igx-grid component in the
-    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/README.md"
-      target="_blank">README</a> or the
-    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid"
-      target="_blank">official documentation</a>.
-</p>
-
-
 <igx-tree-grid #treeGrid [data]="localData" primaryKey="ID" childDataKey="Employees" width="990px" height="700px"
 rowSelection="multipleCascade">
 <igx-paginator></igx-paginator>
@@ -33,7 +23,16 @@
   <igx-column field="JobTitle" dataType="string" minWidth="200px" ></igx-column>
   <igx-column field="Department" dataType="string" minWidth="200px" ></igx-column>
   <igx-column field="Location" dataType="string"></igx-column>
-  <igx-column field="Contacts" dataType="string" minWidth="200px" ></igx-column>
+  <igx-column field="Contacts" dataType="string" minWidth="200px" >
+    <ng-template igxCell let-cell="cell">
+      <div class="flex-container">
+        <a [href]="'mailto:' + cell.row.data.Contacts" (click)="$event.stopPropagation()">
+          <igx-icon>mail</igx-icon>
+        </a>
+        {{ cell.row.data.Contacts }}
+      </div>
+    </ng-template>
+  </igx-column>
   <igx-column field="HireDate" header="Hire Date" dataType="date" minWidth="100px"></igx-column>
   <igx-column field="GrossSalary" dataType="number" minWidth="100px" ></igx-column>
 </igx-tree-grid>
diff --git a/projects/HR-Portal/src/app/tree-grid1/tree-grid1.component.ts b/projects/HR-Portal/src/app/tree-grid1/tree-grid1.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Employee, EMPLOYEE_DATA } from './localData';
-import { IgxTreeGridComponent, IgxColumnComponent, IgxAvatarComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarExporterComponent, IgxCellTemplateDirective } from '@infragistics/igniteui-angular';
+import { IgxTreeGridComponent, IgxColumnComponent, IgxAvatarComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridToolbarExporterComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconService, IgxIconModule } from '@infragistics/igniteui-angular';
 
 
 @Component({
@@ -18,7 +18,8 @@ import { IgxTreeGridComponent, IgxColumnComponent, IgxAvatarComponent, IgxPagina
     IgxGridToolbarPinningComponent,
     IgxGridToolbarTitleComponent,
     IgxGridToolbarExporterComponent,
-    IgxCellTemplateDirective]
+    IgxCellTemplateDirective,
+    IgxIconModule]
 })
 export class TreeGrid1Component implements OnInit {
   public localData: Employee[] = [];