Dynamic subMenu of navbar - Angular

I'm trying to do a simple nav bar, but I have a simple issue with Angular. I know is simple but I just can't find a simple way to do it. Here the html to display items

  <div data-id="{{menu.title}}" *ngFor="let menu of nav">
     {{menu.title}} <button  data-id="{{menu.title}}" *ngIf="menu.subItem.length > 0 " (click)="buttonClick($event)">test</button>
     <ul data-id="{{menu.title}}" *ngIf="list">
       <li *ngFor="let list of menu.subItem">
         {{list}}
       </li>
     </ul>
   </div>

ts

list = false;
  nav = [ {
    title:'home',
    subItem: []
  }, 
  { 
    title:'services',
    subItem: ['something', 'else']}, 
  {
    title:'contact',
    subItem: ['phone', 'email']
  }]

  buttonClick() {
    this.list = !this.list;
   }
  }

so the problem is that when I click on one button, both list are displayed, instead of just that one that is clicked

here the image