مشکل در استفاده از انیمیشن ها

** سلام وقتتون بخیر***
من تونستم انیمیشن ها در انگولار رو پیاده سازی کنم. اما به یک مشکلی برخوردم :

• یک منوی کشویی دارم. میخوام وقتی روی هر کدوم از منو ها کلیک شد، زیرمنوی مربوط به خودش باز بشه.
• به این معنی که ، با یک trigger بشه دو تا المان رو بصورت متفاوت به حرکت درآورد.
  من از این کدها استفاده کردم اما جواب نداد :

فایل animations.ts :

trigger('openClose', [
        state('open', style({
            'opacity': 1
        })),
        state('close', style({
            'opacity': 0,
            'margin' : 0,
            'padding' : 0,
            'height' : 0
        })),
        transition('open <=> close', animate('.5s ease-in-out'))
    ])

---

فایل menu.component.html :

<a class="top-nav-link" (click)="toggleShow(1)">
    <i class="la la-archive"></i>
    <span>نمونه کارها</span>
    <i [@rotateIcon]="animationState[1]" class="la la-angle-left"></i>
</a>
<ul [@openClose]="animationState[1]">
 محتوای زیر منوها
</ul>

---

فایل menu.component.ts :

animationState = {
   1 : 'close',
   2: 'close'
 };
toggleShow(number: number) {
        if (number = 1) {
          this.animationState[1] = this.animationState[1] === 'close' ? 'open' : 'close';
        }
        if (number = 2) {
            this.animationState[2] = this.animationState[2] === 'close' ? 'open' : 'close';
        }
}

اگر راه حلی برای حل مشکل دارید ممنون میشم راهنمایی کنید