Refactor HR Portal component: remove unused rowStyles and ngAfterView…

…Init method, and apply consistent styling for even rows in tree grid. (#47)
IgniteUI · Jan 29, 2025 · 7901088 · 7901088
1 parent 9ed21e8
commit 7901088
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 16 deletions.
diff --git a/projects/hr-portal/src/app/hr-portal/hr-portal.component.html b/projects/hr-portal/src/app/hr-portal/hr-portal.component.html
@@ -3,7 +3,6 @@
   [data]="localData"
   primaryKey="ID"
   childDataKey="Employees"
-  [rowStyles]="rowStyles"
   rowSelection="multipleCascade"
   [allowFiltering]="true"
   [filterMode]="'excelStyleFilter'"

diff --git a/projects/hr-portal/src/app/hr-portal/hr-portal.component.scss b/projects/hr-portal/src/app/hr-portal/hr-portal.component.scss
@@ -15,7 +15,6 @@
 
 igx-tree-grid {
   --ig-size: var(--ig-size-medium);
-
 }
 
 .center-content {
@@ -27,14 +26,14 @@ igx-tree-grid {
   width: 100%;
 }
 
- .employeeDiv {
+.employeeDiv {
   display: flex;
   align-items: center;
   --igx-avatar-size: 28px;
   gap: 8px;
- }
+}
 
- .flagDiv {
+.flagDiv {
   gap: 8px;
   align-items: center;
   display: flex;
@@ -46,6 +45,8 @@ igx-tree-grid {
     display: block;
     overflow: hidden;
   }
-}
-
 
+  ::ng-deep .igx-grid__tr--even{
+    background-color: #FFFFFF;
+  }
+}
diff --git a/projects/hr-portal/src/app/hr-portal/hr-portal.component.ts b/projects/hr-portal/src/app/hr-portal/hr-portal.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Employee, EMPLOYEE_DATA } from '../data/localData';
 import {
   IgxTreeGridComponent,
@@ -18,7 +18,6 @@ import {
   IgxIconService,
   IgxIconButtonDirective,
   IgxButtonModule,
-  RowType,
   SortingDirection,
   DefaultSortingStrategy,
 } from 'igniteui-angular';
@@ -48,14 +47,10 @@ import { CommonModule } from '@angular/common';
     CommonModule,
   ],
 })
-export class HrPortalComponent implements OnInit, AfterViewInit {
+export class HrPortalComponent implements OnInit {
   public localData: Employee[] = [];
   @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true })
   public treeGrid!: IgxTreeGridComponent;
-  public rowStyles = {
-    background: (row: RowType) =>
-      row.index % 2 === 0 ? 'rgba(255,255,255)' : '',
-  };
 
   constructor(private iconService: IgxIconService) {}
 
@@ -122,9 +117,7 @@ export class HrPortalComponent implements OnInit, AfterViewInit {
     icons.forEach((icon) => {
       this.iconService.addSvgIcon(icon.name, icon.path, icon.category);
     });
-  }
 
-  ngAfterViewInit(): void {
     this.treeGrid.sortingExpressions = [
       {
         dir: SortingDirection.Asc,

diff --git a/src/app/views/hr-portal/hr-portal-view.component.scss b/src/app/views/hr-portal/hr-portal-view.component.scss
@@ -25,4 +25,8 @@
       $schema: $light-fluent-schema
     );
   }
+
+  ::ng-deep .igx-grid__tr--even{
+    background-color: #FFFFFF;
+  }
 }