Merge pull request #13503 from IgniteUI/fix-13502

fix(tree): expand indicator directive #13502

Author: teodosiah

projects/igniteui-angular/src/lib/tree/public_api.ts

@@ -1,7 +1,7 @@
 import { IgxTreeNodeComponent, IgxTreeNodeLinkDirective } from './tree-node/tree-node.component';
-import { IgxTreeComponent } from './tree.component';
+import { IgxTreeComponent, IgxTreeExpandIndicatorDirective } from './tree.component';
 
-export { IgxTreeComponent } from './tree.component';
+export { IgxTreeComponent, IgxTreeExpandIndicatorDirective } from './tree.component';
 export * from './tree-node/tree-node.component';
 export { IgxTreeSearchResolver, ITreeNodeSelectionEvent, ITreeNodeEditingEvent,
     ITreeNodeEditedEvent, ITreeNodeTogglingEventArgs, ITreeNodeToggledEventArgs,
@@ -12,5 +12,6 @@ export { IgxTreeSearchResolver, ITreeNodeSelectionEvent, ITreeNodeEditingEvent,
 export const IGX_TREE_DIRECTIVES = [
     IgxTreeComponent,
     IgxTreeNodeComponent,
-    IgxTreeNodeLinkDirective
+    IgxTreeNodeLinkDirective,
+    IgxTreeExpandIndicatorDirective
 ] as const;

projects/igniteui-angular/src/lib/tree/tree-navigation.spec.ts

@@ -310,6 +310,10 @@ describe('IgxTree - Navigation #treeView', () => {
                 fix.detectChanges();
             }));
 
+            it('The tree should have custome expand indicator templates', () => {
+                expect(tree.nodes.first.nativeElement.querySelector('.igx-icon').textContent).toBe('close_fullscreen');
+            });
+
             it('The tree container should be scrolled so that the focused node is in view', fakeAsync(() => {
                 // set another node as active element, expect node to be in view
                 tick();

projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts

@@ -524,7 +524,7 @@ export class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer implements Ig
 
     /** @hidden @internal */
     public get expandIndicatorTemplate(): TemplateRef<any> {
-        return this.tree?.expandIndicator ? this.tree.expandIndicator : this._defaultExpandIndicatorTemplate;
+        return this.tree?.expandIndicator || this._defaultExpandIndicatorTemplate;
     }
 
     /**

projects/igniteui-angular/src/lib/tree/tree-samples.spec.ts

@@ -1,7 +1,8 @@
 import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { IgxTreeComponent, IgxTreeNodeComponent, IgxTreeNodeLinkDirective } from './public_api';
+import { IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeNodeComponent, IgxTreeNodeLinkDirective } from './public_api';
 import { HIERARCHICAL_SAMPLE_DATA } from 'src/app/shared/sample-data';
 import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { IgxIconComponent } from '../icon/icon.component';
 
 @Component({
     template: `
@@ -118,10 +119,13 @@ export class IgxTreeNavigationComponent {
                 </igx-tree-node>
             </igx-tree-node>
         </igx-tree-node>
+        <ng-template igxTreeExpandIndicator let-expanded>
+            <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
+        </ng-template>
     </igx-tree>
     `,
     standalone: true,
-    imports: [IgxTreeComponent, IgxTreeNodeComponent, NgFor]
+    imports: [IgxTreeComponent, IgxTreeNodeComponent, IgxTreeExpandIndicatorDirective, IgxIconComponent, NgFor]
 })
 export class IgxTreeScrollComponent {
     @ViewChild(IgxTreeComponent, { static: true }) public tree: IgxTreeComponent;

src/app/tree/tree.sample.html

@@ -101,6 +101,9 @@
                     <ng-template #nodeTemplate let-node>
                         <a [igxTreeNodeLink]="node" href="https://google.com">Link to Google</a>
                     </ng-template>
+                    <ng-template igxTreeExpandIndicator let-expanded>
+                        <igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
+                    </ng-template>
                 </igx-tree>
             </div>
 

src/app/tree/tree.sample.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms';
 import {
     DisplayDensity, growVerIn, growVerOut,
     IgxTreeNodeComponent, IgxTreeSearchResolver, IgxTreeComponent, ITreeNodeTogglingEventArgs,
-    ITreeNodeToggledEventArgs, ITreeNodeSelectionEvent, IgxTreeNode, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxLayoutDirective, IgxSwitchComponent, IgxTreeNodeLinkDirective
+    ITreeNodeToggledEventArgs, ITreeNodeSelectionEvent, IgxTreeNode, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxLayoutDirective, IgxSwitchComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective
 } from 'igniteui-angular';
 import { Subject } from 'rxjs';
 import { cloneDeep } from 'lodash-es';
@@ -35,7 +35,15 @@ interface CompanyData {
     templateUrl: 'tree.sample.html',
     styleUrls: ['tree.sample.scss'],
     standalone: true,
-    imports: [IgxLayoutDirective, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxLabelDirective, FormsModule, IgxSwitchComponent, IgxButtonGroupComponent, IgxTreeComponent, IgxTreeNodeComponent, NgFor, IgxTreeNodeLinkDirective, NgTemplateOutlet, IgxIconComponent, NgIf, AsyncPipe]
+    imports: [
+        IgxLayoutDirective,
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxButtonDirective,
+        IgxLabelDirective,
+        FormsModule,
+        IgxSwitchComponent,
+        IgxButtonGroupComponent, IgxTreeComponent, IgxTreeNodeComponent, NgFor, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective, NgTemplateOutlet, IgxIconComponent, NgIf, AsyncPipe]
 })
 export class TreeSampleComponent implements AfterViewInit {
     @ViewChild('tree1', { static: true })