Merge pull request #8004 from IgniteUI/header-title

Remove igx-grid column component elementref

Author: rkaraivanov

.github/workflows/nodejs.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master, 9.1.x, 10.0.x ]
+    branches: [ master, 9.1.x, 10.0.x, 10.1.x ]
   pull_request:
-    branches: [ master, 9.1.x, 10.0.x ]
+    branches: [ master, 9.1.x, 10.0.x, 10.1.x ]
 
 jobs:
   build:

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -23,7 +23,7 @@ import { DeprecateMethod } from '../core/deprecateDecorators';
 import { HammerGesturesManager } from '../core/touch';
 import { ColumnType } from './common/column.interface';
 import { RowType } from './common/row.interface';
-import { GridSelectionMode, GridKeydownTargetType } from './common/enums';
+import { GridSelectionMode } from './common/enums';
 import { GridType } from './common/grid.interface';
 import { ISearchInfo } from './grid/public_api';
 

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -9,8 +9,7 @@ import {
     QueryList,
     TemplateRef,
     Output,
-    EventEmitter,
-    ElementRef,
+    EventEmitter
 } from '@angular/core';
 import { notifyChanges } from '../watch-changes';
 import { WatchColumnChanges } from '../watch-changes';
@@ -87,6 +86,21 @@ export class IgxColumnComponent implements AfterContentInit {
     @WatchColumnChanges()
     @Input()
     public header = '';
+    /**
+     * Sets/gets the `title` value.
+     * ```typescript
+     * let title = this.column.title;
+     * ```
+     * ```html
+     * <igx-column [title] = "'Some column tooltip'"></igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public title = '';
     /**
      * Sets/gets whether the column is sortable.
      * Default value is `false`.
@@ -1344,7 +1358,7 @@ export class IgxColumnComponent implements AfterContentInit {
     protected collapseIndicatorTemplate:  IgxCollapsibleIndicatorTemplateDirective;
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef,
-        public rowIslandAPI: IgxRowIslandAPIService, public elementRef: ElementRef) { }
+        public rowIslandAPI: IgxRowIslandAPIService) { }
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -1679,7 +1679,7 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         const grid = fixture.componentInstance.grid;
         const generalGroup = grid.columnList.find(c => c.header === 'General Information');
-        generalGroup.elementRef.nativeElement.title = 'General Information Title';
+        generalGroup.title = 'General Information Title';
         fixture.detectChanges();
 
         const headers = fixture.debugElement.queryAll(By.css('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));

projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

@@ -384,7 +384,7 @@ describe('IgxGrid - Column properties #grid', () => {
         const nameColumn = grid.getColumnByName('Name');
 
         idColumn.header = 'ID Header';
-        idColumn.elementRef.nativeElement.title = 'ID Title';
+        idColumn.title = 'ID Title';
         nameColumn.header = 'Name Header';
         fix.detectChanges();
 

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -6,7 +6,7 @@
     *ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)" #groupArea>
     <igx-chips-area (onReorder)="chipsOrderChanged($event)" (onMoveEnd)="chipsMovingEnded()">
         <ng-container *ngFor="let expr of chipsGoupingExpressions; let last = last;">
-            <igx-chip [id]="expr.fieldName" [attr.title]="getGroupByChipTitle(expr)"
+            <igx-chip [id]="expr.fieldName" [title]="getGroupByChipTitle(expr)"
                 [removable]="getColumnGroupable(expr.fieldName)"
                 [draggable]="getColumnGroupable(expr.fieldName)" [displayDensity]="displayDensity"
                 (onKeyDown)="onChipKeyDown($event)" (onRemove)="onChipRemoved($event)"

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -25,7 +25,7 @@
 
 
 <ng-template #defaultColumn>
-    <span class="igx-grid__th-group-title" [attr.title]="columnTitle">{{column.header}}</span>
+    <span class="igx-grid__th-group-title" [title]="columnTitle">{{column.header}}</span>
 </ng-template>
 
 <ng-template #defaultCollapseIndicator>

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -254,7 +254,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
      * @hidden
      */
     get columnTitle() {
-        return this.column.elementRef.nativeElement.getAttribute('title') || this.column.header;
+        return this.column.title || this.column.header;
     }
 
     /**

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html

@@ -1,5 +1,5 @@
 <ng-template #defaultColumn>
-    <span [attr.title]="columnTitle">{{ column.header || column.field }}</span>
+    <span [title]="columnTitle">{{ column.header || column.field }}</span>
 </ng-template>
 
 <span class="igx-grid__th-title">

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -122,8 +122,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
     }
 
     get columnTitle() {
-        return this.column.elementRef.nativeElement.getAttribute('title') ||
-            this.column.header || this.column.field;
+        return this.column.title || this.column.header || this.column.field;
     }
 
     @HostBinding('attr.role')