fix(column): removing elementRef injection #6940

Author: kdinev

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

@@ -87,6 +87,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 +1359,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/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.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')