feat(tabs/bottomNav): return icon and label from relatedPanel #4297

Author: rmkrmk

projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts

@@ -93,10 +93,7 @@ export class IgxBottomNavComponent implements AfterViewInit {
      * @memberof IgxBottomNavComponent
      */
     public get tabs(): QueryList<IgxTabComponent> {
-        if (this.hasContentTabs) {
-            return this.contentTabs;
-        }
-        return this.viewTabs;
+        return this.hasContentTabs ? this.contentTabs : this.viewTabs;
     }
 
     /**
@@ -475,6 +472,11 @@ export class IgxTabComponent {
     @Input()
     public relatedPanel: IgxTabPanelComponent;
 
+    /**
+     *@hidden
+     */
+    private _label: string;
+
     /**
      * Sets/gets the `label` of the tab panel.
      * ```html
@@ -486,20 +488,41 @@ export class IgxTabComponent {
      * @memberof IgxTabComponent
      */
     @Input()
-    public label: string;
+    public get label(): string {
+        return this.relatedPanel ? this.relatedPanel.label : this._label;
+    }
+    public set label(newValue: string) {
+        if (this.relatedPanel) {
+            this.relatedPanel.label = newValue;
+        }
+        this._label = newValue;
+    }
+
+    /**
+     *@hidden
+     */
+    private _icon: string;
 
     /**
      * Sets/gets  the `icon` of the tab panel.
      * ```html
-     * <igx-tab [icon] = "panel_icon"><igx-tab>
+     * <igx-tab [icon] = "tab_icon"><igx-tab>
      * ```
      * ```typescript
      * let tabIcon =  this.tab.icon;
      * ```
      * @memberof IgxTabComponent
      */
     @Input()
-    public icon: string;
+    public get icon(): string {
+        return this.relatedPanel ? this.relatedPanel.icon : this._icon;
+    }
+    public set icon(newValue: string) {
+        if (this.relatedPanel) {
+            this.relatedPanel.icon = newValue;
+        }
+        this._icon = newValue;
+    }
 
     /**
      *@hidden
@@ -613,10 +636,7 @@ export class IgxTabComponent {
      * ```
      */
     public get context(): any {
-        if (this.relatedPanel) {
-            return this.relatedPanel;
-        }
-        return this;
+        return this.relatedPanel ? this.relatedPanel : this;
     }
 
     constructor(private _tabBar: IgxBottomNavComponent, private _element: ElementRef) {

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -27,6 +27,9 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     @Input()
     public relatedGroup: IgxTabsGroupComponent;
 
+    /**@hidden*/
+    private _icon: string;
+
     /**
     * An @Input property that sets the value of the `icon`.
     * The value should be valid icon name from {@link https://material.io/tools/icons/?style=baseline}.
@@ -35,16 +38,35 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     *```
     */
     @Input()
-    public icon: string;
+    public get icon(): string {
+        return this.relatedGroup ? this.relatedGroup.icon : this._icon;
+    }
+    public set icon(newValue: string) {
+        if (this.relatedGroup) {
+            this.relatedGroup.icon = newValue;
+        }
+        this._icon = newValue;
+    }
+
+    /**@hidden*/
+    private _label: string;
 
     /**
     * An @Input property that sets the value of the `label`.
     *```html
-    *<igx-tabs-item label="Tab 1" icon="folder">
+    *<igx-tabs-item label="Tab 2" icon="folder">
     *```
     */
     @Input()
-    public label: string;
+    public get label(): string {
+        return this.relatedGroup ? this.relatedGroup.label : this._label;
+    }
+    public set label(newValue: string) {
+        if (this.relatedGroup) {
+            this.relatedGroup.label = newValue;
+        }
+        this._label = newValue;
+    }
 
     /**@hidden*/
     @ViewChild('defaultTabTemplate', { read: TemplateRef })
@@ -162,10 +184,7 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     */
     @Input()
     get disabled(): boolean {
-        if (this.relatedGroup) {
-            return this.relatedGroup.disabled;
-        }
-        return this._disabled;
+        return this.relatedGroup ? this.relatedGroup.disabled : this._disabled;
     }
     set disabled(newValue: boolean) {
         if (this.relatedGroup) {