Merge pull request #16966 from IgniteUI/dpetev/dev-demos-nav-filter

chore(demos): add basic side nav filter

Author: ChronosSF

src/app/app.component.html

@@ -7,15 +7,28 @@
         <ng-template igxDrawer>
             <div class="nav-header"></div>
 
+            <!-- Filter Input -->
+            <igx-input-group type="search" style="margin: 8px;">
+                <igx-prefix>
+                    <igx-icon>filter_alt</igx-icon>
+                </igx-prefix>
+                <input igxInput placeholder="Filter..." [(ngModel)]="filterText" />
+                @if (filterText()) {
+                    <igx-suffix>
+                        <igx-icon (click)="filterText.set('')">clear</igx-icon>
+                    </igx-suffix>
+                }
+            </igx-input-group>
+
             <!-- Components -->
             <span igxDrawerItem [isHeader]="true">Components</span>
 
-                @for (item of componentLinks; track item) {
-                    <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                        <igx-icon>{{item.icon}}</igx-icon>
-                        <span class="navdrawer-ellipsis">{{item.name}}</span>
-                    </span>
-                }
+            @for (item of filteredComponentLinks(); track item) {
+                <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                    <igx-icon>{{item.icon}}</igx-icon>
+                    <span class="navdrawer-ellipsis">{{item.name}}</span>
+                </span>
+            }
 
             <span igxDrawerItem [disabled]="true">
                 <igx-icon>web</igx-icon>
@@ -25,17 +38,17 @@
             <!--Directives-->
             <span igxDrawerItem [isHeader]="true">Directives</span>
 
-                @for (item of directiveLinks; track item) {
-                    <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
-                        <igx-icon>{{item.icon}}</igx-icon>
-                        <span class="navdrawer-ellipsis">{{item.name}}</span>
-                    </span>
-                }
+            @for (item of filteredDirectiveLinks(); track item) {
+                <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                    <igx-icon>{{item.icon}}</igx-icon>
+                    <span class="navdrawer-ellipsis">{{item.name}}</span>
+                </span>
+            }
 
             <!--Style guide-->
             <span igxDrawerItem [isHeader]="true">Style</span>
 
-            @for (item of styleLinks; track item) {
+            @for (item of filteredStyleLinks(); track item) {
                 <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
                     <igx-icon>{{item.icon}}</igx-icon>
                     <span class="navdrawer-ellipsis">{{item.name}}</span>

src/app/app.component.ts

@@ -4,17 +4,20 @@ import {
     ViewChild,
     HostBinding,
     inject,
-    signal
+    signal,
+    computed,
 } from '@angular/core';
 import { Router, NavigationStart, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { DocumentDirection, PageHeaderComponent } from './pageHeading/pageHeading.component';
 import { CommonModule, registerLocaleData } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { PropertiesPanelComponent } from './properties-panel/properties-panel.component';
 import { PropertyChangeService } from './properties-panel/property-change.service';
 import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
 import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
 import { IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxInputGroupComponent, IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 
 // I18n
 import { registerI18n } from 'igniteui-angular';
@@ -38,12 +41,17 @@ import localeHant from '@angular/common/locales/zh-Hant';
         IgxNavigationDrawerComponent,
         IGX_NAVIGATION_DRAWER_DIRECTIVES,
         CommonModule,
+        FormsModule,
         RouterLinkActive,
         RouterLink,
         IgxIconComponent,
         PageHeaderComponent,
         RouterOutlet,
         IgxRippleDirective,
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxPrefixDirective,
+        IgxSuffixDirective,
         PropertiesPanelComponent,
     ]
 })
@@ -56,6 +64,9 @@ export class AppComponent implements OnInit {
 
     public dirMode = signal<'ltr' | 'rtl'>('ltr');
 
+    // Filter for navigation items
+    public filterText = signal('');
+
     // This method will be triggered by PageHeaderComponent's toggleDirection event
     public onDirectionToggle(dir: DocumentDirection): void {
         this.dirMode.set(dir);
@@ -777,6 +788,31 @@ export class AppComponent implements OnInit {
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 
+    // Computed filtered arrays
+    public filteredComponentLinks = computed(() => {
+        const filterValue = this.filterText().toLowerCase();
+        if (!filterValue) {
+            return this.componentLinks;
+        }
+        return this.componentLinks.filter(item => item.name.toLowerCase().includes(filterValue));
+    });
+
+    public filteredDirectiveLinks = computed(() => {
+        const filterValue = this.filterText().toLowerCase();
+        if (!filterValue) {
+            return this.directiveLinks;
+        }
+        return this.directiveLinks.filter(item => item.name.toLowerCase().includes(filterValue));
+    });
+
+    public filteredStyleLinks = computed(() => {
+        const filterValue = this.filterText().toLowerCase();
+        if (!filterValue) {
+            return this.styleLinks;
+        }
+        return this.styleLinks.filter(item => item.name.toLowerCase().includes(filterValue));
+    });
+
     constructor(private router: Router, private iconService: IgxIconService) {
         iconService.setFamily('fa-solid', { className: 'fa', type: 'font', prefix: 'fa-'});
         iconService.setFamily('fa-brands', { className: 'fab', type: 'font' });