How to detect when vertical-nav-group is expanded/collapsed

Question

I'm attempting to make the vertical-nav collapse all other groups when a group is opened (this is to limit the size of the menu when there are lots of items in a group).

person-nav.component.html

<clr-vertical-nav-group (expandedChange)="doExpand()">
  {{this.personType || "People"}}
  <clr-vertical-nav-group-children>
    <a clrVerticalNavLink *ngFor="let person of people">
      {{person.name}}
    </a>
  </clr-vertical-nav-group-children>
</clr-vertical-nav-group>

person-nav.component.ts

@Component({
  selector: 'app-person-nav',
  templateUrl: './person-nav.component.html',
  styleUrls: ['./person-nav.component.css']
})
export class PersonNavComponent implements OnInit {
...
  doExpand() {
    console.warn('Test');
  }
}

But it never logs anything, and any other code in doExpand() is never triggered.

Answer 1

You can use the existing @Output on the clr-vertical-nav-group child component: clrVerticalNavGroupExpandedChange. This is what it might look like for your example code:

<clr-vertical-nav-group (clrVerticalNavGroupExpandedChange)="doExpand($event)">
  {{this.personType || "People"}}
  <clr-vertical-nav-group-children>
    <a clrVerticalNavLink *ngFor="let person of people">
      {{person.name}}
    </a>
  </clr-vertical-nav-group-children>
</clr-vertical-nav-group>