Menu: animation open/close - css

Question

When I open and close a menu item, there is no animation. I would like to know how to create an animation, please?
HTML file
<div class="wrapper">
<!-- Top Menu -->
<div class="sidebar">
<!-- Menu Item -->
<ul>
<li
*ngFor="let menu of menus; let i = index"
[class.active]="menu.active"
>
<ng-container>
<a class="item" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</a>
<ul *ngIf="menu.active">
<li *ngFor="let submenu of menu.submenu" class="submenu">{{submenu.name}}</li>
</ul>
</ng-container>
</li>
</ul>
</div>
</div>
I don't know if it's possible to do it in Angular or CSS? I made you a reproduction of the project => Stackblitz.

Answer 1

the easer is using Angular animations. add this animation to your component
animations:[
trigger('accordion', [
transition(':enter', [
style({ height: 0 }),
animate('1000ms', style({ "height": '*' })),
]),
transition(':leave', [
animate('100ms', style({ "height": 0 }))
])
]),
]
See that, when "enter" start with style:height=0 and animate to reach style:height=* (the * main that reach the "normal" height) and you use "leave" to animate and change the style to "height=0".
Then just use
<ul #accordion *ngIf="menu.active">
<li *ngFor="let submenu of menu.submenu" class="submenu">
{{submenu.name}}
</li>
</ul>
NOTE1: don't forget import the BrowserAnimationsModule in your module
NOTE2: You need add to your .css
.wrapper ul li ul{
overflow:hidden;
}
Your forked stackblitz

Answer 2

I think you should change app.component.ts like this.
selectMenu(parentMenu: { name: string, active:boolean }): void {
this.menus.forEach((menu) => {
if (menu.name === parentMenu.name) {
menu.active = !menu.active;
}
});
}
}
because Each time active is pressed, the boolean value should change.
have a nice day:)