<file_sep>export class ItemDetails {
    description: string;
    name: string;
    price: DoubleRange;
}<file_sep>import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { ItemDetails } from '../itemdetails';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  menuDetails: AngularFireList<any[]>;
  menu: Observable<any[]>;
  subMenuItems: Array<{ name: string, items: ItemDetails[] }>;

  constructor(private db: AngularFireDatabase) {

    this.menuDetails = db.list('menu_details');
    this.menu = this.menuDetails.snapshotChanges();
    this.menu.subscribe(data => {

      this.subMenuItems = [];
      data.forEach(snapshot => {
        var key = snapshot.key;
        var itemDetails = this.extractBody(snapshot.payload.val());
        this.subMenuItems.push({ name : key, items : itemDetails});
      });
      console.log(this.subMenuItems);
    });

   }

   extractBody(data) : ItemDetails[] { //converting object to array
    var items = [];
    var itemDetails = ItemDetails;

    for(let i in data) {
      itemDetails = data[i];
      items.push(itemDetails);
    }

    return items;
 }

  ngOnInit() {
  }

}
<file_sep>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-orderonline',
  templateUrl: './orderonline.component.html',
  styleUrls: ['./orderonline.component.css']
})
export class OrderonlineComponent implements OnInit {

  sidenavList: Array<{ name: string, subMenu: any }>;
  subMenuItems: Array<{ name: string, items: any }>;
  selectedSubMenu: any;
  selectsubitems : any;

  constructor() {
    this.selectedSubMenu = "Soups"; //if no menu is selected by default display soup content

    this.sidenavList = [
      {
        name: "Menu",
        subMenu: [
          { name: "Soups" },
          { name: "Appetizers" },
          { name: "Rotis/Paratas" },
          { name: "Curries" },
          { name: "Desserts" }]
      },
      {
        name: "Drinks",
        subMenu: [
          { name: "Coffe/Tea" },
          { name: "Beer" },
          { name: "Wine" },
          { name: "Juices/Milk shakes" }]
      }
    ]

    this.subMenuItems = [
      {
        name: "Soups",
        items: [
          { name: "Corn Soup", price: 3.50, id:1 },
          { name: "Tomato Soup", price: 4.50, id:2 }
        ]
      },
      {
        name: "Appetizers",
        items: [
          { name: "Gobi manchurian", price: 6.50, id:3 },
          { name: "chicken pepper dry", price: 7.50, id:4 }
        ]
      },
      {
        name: "Rotis/Paratas",
        items: [
          { name: "Aloo parata", price: 4.00, id:5 },
          { name: "Tandoori roti", price: 1.50, id:6 }
        ]
      },
      {
        name: "Curries",
        items: [
          { name: "Bendi Masala", price: 9.50, id:7 },
          { name: "Ch<NAME>", price: 8.50, id:8 }
        ]
      },
      {
        name: "Desserts",
        items: [
          { name: "Jamoon(2)", price: 3.00, id:9 },
          { name: "GudBud", price: 5.00 , id:10 }
        ]
      }
    ]
  }

  onSelect(submenuname: any): void {
    this.selectedSubMenu = submenuname;
    this.fetchSubMenuItems(this.subMenuItems, submenuname);
  }

  fetchSubMenuItems(arr, val) {
    this.selectsubitems = arr.filter(function(arrVal) {
      console.log(arrVal.name, val);
    return arrVal.name === val;
  });
  console.log(this.selectsubitems);
}

  ngOnInit() {
    this.onSelect(this.selectedSubMenu);
  }

}
