منوی کشویی در انگولار

سلام وقتتون بخیر

من یک منو دارم و میخوام منو های مختلفی (با زیر منو و بدون زیر منو) رو قرار بدم :

فایل nav.conponent.html :

<nav>
        <ul>
            <li class="nav-item" *ngFor="let menu of menus; let i = index">
                <a class="nav-link" [routerLink]="menu.link" (click)="accordionShow = !accordionShow">
                    <i [class]="menu.icon"></i>
                    <span>{{ menu.name }}</span>
                    <i [ngClass]="{'rotated': accordionShow}" class="la la-angle-left"></i>
                </a>
                <div class="accordionMenu" [ngClass]="{'expandexMenu': accordionShow}">
                    <ul>
                        <li class="nav-item" *ngFor="let dropdownMenu of menu.children">
                            <a class="nav-link" [routerLink]="dropdownMenu.link">
                                <i [class]="dropdownMenu.icon"></i>
                                <span>{{ dropdownMenu.name }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>

فایل nav.conponent.ts :

accordionShow : boolean = false;

    menus : any[] = [
        {
            name : 'صفحه اصلی',
            link : ['/'],
            icon : 'la la-home'
        },
        {
            name : 'نمونه کارها',
            link : [''],
            icon : 'la la-archive',
            children : [
                {
                    name : 'نمایش همه',
                    link : ['/projects'],
                    icon : 'la la-archive'
                },
                {
                    name : 'افزودن نمونه کارها',
                    link : ['/new-project'],
                    icon : 'la la-plus-circle'
                }
            ]
        },
        {
            name : 'اعضای تیم',
            link : [''],
            icon : 'la la-user',
            children : [
                {
                    name : 'نمایش همه',
                    link : ['/users'],
                    icon : 'la la-user'
                },
                {
                    name : 'افزودن همکار',
                    link : ['/new-user'],
                    icon : 'la la-user-plus'
                }
            ]
        },
        {
            name : 'پیام ها',
            link : ['/messages'],
            icon : 'la la-envelope-o'
        },
        {
            name : 'خروج',
            link : ['/'],
            icon : 'la la-power-off'
        }
    ];

چطور میتونم به کدم بفهمونم که وقتی زیر منو داشت اون div.accordionMenu رو نمایش بده و وقتی زیر منویی نداشت چیزی نمایش نده؟