Pure Angular menu

I am trying to implement menus and submenus in side nav with pure angular 5 without using jQuery and Material Design I don't want to use that.

I am reading the file which has menus and submenu in JSON format i.e

[{
    "id":   "menu_1",
    "name":     "Billing & Payment",
    "isChild":   true,
    "sub_menus": [{
        "id":   "menu_1_1",
        "name":     "Consolidated Statement of Account",
        "isChild":   false,
        "sub_menus": []
    }]
},
{
    "id":   "menu_2",
    "name":     "Applications & Registration",
    "isChild":   true,
    "sub_menus": [{
        "id":   "menu_2_1",
        "name":     "Employment",
        "isChild":   false,
        "sub_menus": []
    },{
        "id":   "menu_2_2",
        "name":     "Grant",
        "isChild":   false,
        "sub_menus": []
    },{
        "id":   "menu_2_3",
        "name":     "Training",
        "isChild":   false,
        "sub_menus": []
    },{
        "id":   "menu_2_4",
        "name":     "Opportunities",
        "isChild":   false,
        "sub_menus": []
    }]
},
{
    "id":   "menu_3",
    "name":     "Helpdesk",
    "isChild":   true,
    "sub_menus": [{
        "id":   "menu_3_1",
        "name":     "Incident",
        "isChild":   false,
        "sub_menus": []
    },{
        "id":   "menu_3_2",
        "name":     "Service Request",
        "isChild":   false,
        "sub_menus": []
    }]
}
]

and using UL and LI with *ngFor to render the menu and submenu in side nav

<ul class="acc-menu">
            <li *ngFor="let menu of menu_data_set; let i=index" (click)="menu.id = !menu.id" [ngClass]="{'active' : !menu.id }">
              <a>
                <i class="fa fa-angle-right"></i><span>{{menu.name}}</span>
              </a>
              <ul class="acc-menu" *ngIf="menu.isChild" [ngClass]="{'show': !menu.id }">
                <li *ngFor="let submenu of menu.sub_menus">
                  <a (click)="boxesRender(submenu.id)" >{{submenu.name}}</a>
                </li>
              </ul>
            </li>
          </ul>

menu_data_set <== has set of menu I use (click)="menu.id = !menu.id" <= here menu.id is treated as a variable at the frontend by using the CSS class show menu show and hide.

But the problem is how to keep the main menu open while clicking on the submenu and also closing the first main_mainu at the clicking of the submenu of another main_menu

I try to keep opening of main_menu by adding the code at

<a (click)="boxesRender(submenu.id); menu.id = !menu.id" >{{submenu.name}}</a>

but this is keep opining of all menu after click and I want to close or hide the submenu of the main menu while clicking on another submenu of the main menu