feat(select): implement select-item text input #5989 (#6047)

Author: IvayloG

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
 ## 9.0.0
 
 ### General
@@ -16,6 +17,14 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
+
+## 8.2.6
+
+### New Features
+- `IgxSelectItem`
+    - `text` input is added. By default, the Select component will display the selected item's element inner text. In cases with a more complex item template, where more than just text interpolation is used, set the text property to specify what to display in the select field when the item is selected.
+
+
 ## 8.2.4
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - The header text of the columns and the column groups now has the `title` attribute set to it in order to expose a native browser tooltip.

projects/igniteui-angular/src/lib/select/select-item.component.ts

@@ -1,14 +1,42 @@
 import { IgxDropDownItemComponent } from './../drop-down/drop-down-item.component';
-import { Component, DoCheck } from '@angular/core';
+import { Component, DoCheck, Input } from '@angular/core';
 
 @Component({
     selector: 'igx-select-item',
     template: '<ng-content></ng-content>'
 })
 export class IgxSelectItemComponent extends IgxDropDownItemComponent implements DoCheck {
 
+    private _text: any;
+
+    /**
+     * An @Input property that gets/sets the item's text to be displayed in the select component's input when the item is selected.
+     *
+     * ```typescript
+     *  //get
+     *  let mySelectedItem = this.dropDown.selectedItem;
+     *  let selectedItemText = mySelectedItem.text;
+     * ```
+
+     * ```html
+     * // set
+     * <igx-select-item [text]="'London'"></igx-select-item>
+     * ```
+     */
+    @Input()
+    public get text(): string {
+        return this._text;
+    }
+
+    public set text(text: string) {
+        this._text = text;
+    }
+
     /** @hidden @internal */
     public get itemText() {
+        if (this._text !== undefined) {
+            return this._text;
+        }
         return this.elementRef.nativeElement.innerText.trim();
     }