title: Angular 4 pipe filter for nested json array
body: <p>I am trying to use a custom pipe to filter my Json data loop using an input field with ngModel.
  Basically i have a side bar with large number of items so i want to have a input field so that i can search items in sidebar.
  Now the sidebar items can be single or may have sub-items.
  Here is my sidebar array (which basically a model for sidebar) from which i want to filter items :</p>
  
  <p><strong>Array</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export const menu_items = [
    {
      "title": "Dashboard",
      "class": "nav-item",
      "iconClass": "icon-speedometer"
    },
    {
      "title": "Configuration",
      "class": "nav-item nav-dropdown",
      children: [
        {
          "title": "Area Setup",
          "iconClass": "icon-puzzle",
          "dropdown" : true,
          children: [
            {
              "title": "Company",
              "iconClass": "icon-puzzle"
            },
            {
              "title": "Office",
              "iconClass": "icon-puzzle"
            }
          ]
        },
        {
          "title": "User Setup",
          "iconClass": "icon-puzzle",
          "dropdown" : true,
          children: [
            {
              "title": "Company",
              "iconClass": "icon-puzzle"
            },
            {
              "title": "Profile",
              "iconClass": "icon-puzzle"
            },
            {
              "title": "User",
              "iconClass": "icon-puzzle"
            },
            {
              "title": "Role",
              "iconClass": "icon-puzzle"
            }
          ]
        },
      ]
    },
    {
      "title": "Receiving",
      "class": "nav-item",
      children: [
        {
          "title": "Receipt Enquiry",
          "iconClass": "icon-speedometer"
        },
        {
          "title": "Receiving",
          "iconClass": "icon-speedometer"
        },
      ]
    },
    {
      "title": "Logs",
      "class": "nav-item",
      children: [
        {
          "title": "Inventory Logs",
          "iconClass": "icon-list"
        },
        {
          "title": "Audit Logs",
          "iconClass": "icon-list"
        },
        {
          "title": "Process Logs",
          "iconClass": "icon-list"
        }
      ]
    },
  ];
  </code></pre>
  
  <p>Here is my Component</p>
  
  <pre class="lang-js prettyprint-override"><code>import { MenuModel, menu_items } from "./menu.model";
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './layout.component.html',
    providers: [MenuModel]
  })
  
  export class LayoutComponent {
  
  searchText = '';
  
  public  menu_items = menu_items;
  
  }
  </code></pre>
  
  <p>Here is my View:
  <strong>View</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search in menu"&gt;
  &lt;div class="sidebar"&gt;
    &lt;nav class="sidebar-nav"&gt;
      &lt;ul *ngFor="let menu of menu_items | filter : searchText" class="nav" &gt;
        &lt;li class="nav-title text-center"&gt;
          &lt;span&gt;{{menu.title}}&lt;/span&gt;
        &lt;/li&gt;
        &lt;li *ngFor="let child of menu.children" class="{{menu.class}}" &gt;
          &lt;a *ngIf="!child.component" class="nav-link" href="javascript:void(0)" &gt;          &lt;i class="{{child.iconClass}}"&gt; &lt;/i&gt; 
          {{child.title}}
          &lt;span *ngIf="child.new" class="badge badge-info"&gt;NEW &lt;/span&gt;
          &lt;/a&gt;
          &lt;ul *ngIf="child.children" class="nav-dropdown-items"&gt;
            &lt;li class="nav-item" *ngFor="let childlevel2 of child.children"&gt;
              &lt;a class="nav-link"  href="javascript:void(0)" 
                &lt;i class="{{childlevel2.iconClass}}"&gt;&lt;/i&gt;
                {{childlevel2.title}}
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have not much experience with custom pipe i have searched on forums and created filter like this but it is not working</p>
  
  <p><strong>Custom Filter Pipe</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Pipe, PipeTransform } from '@angular/core';
  @Pipe({
    name: 'filter'
  })
  export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
      if(!items) return [];
      if(!searchText) return items;
      searchText = searchText.toLowerCase();
  
      return items.filter(item =&gt; item.title.includes(searchText));
    }
  }
  </code></pre>
  
  <p>now what i need is that when i enter any term, my filter return me all those arrays (which eventually will be my list items) whose title matches with the search term</p>