title: error TS2729: Property 'expanded' is used before its initialization
body: <p><strong>error</strong>  This is the error i got after upgrading to angular 10.Is there anything to change. What can i change to solve it.</p>
  <pre><code>Error: src/app/shared/layout/menu-list-item/menu-list-item.component.ts:22:58 - error TS2729: Property 'expanded' is used before its initialization.
  
  22   @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
                                                              ~~~~~~~~
  
    src/app/shared/layout/menu-list-item/menu-list-item.component.ts:21:3
      21   expanded?: boolean;
  </code></pre>
  <p><strong>Code</strong> Below code is the part where the errors occurs.I have tried few ways still get the error.
  Any idea what is causing it. What should i change or is it causing from dependencies outdated version.</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, HostBinding, Input, OnChanges } from '@angular/core';
  import { Router } from '@angular/router';
  import { animate, state, style, transition, trigger } from '@angular/animations';
  import { NavItem } from '../../models/navItem';
  
  @Component({
    selector: 'app-menu-list-item',
    templateUrl: './menu-list-item.component.html',
    styleUrls: ['./menu-list-item.component.scss'],
    animations: [
      trigger('indicatorRotate', [
        state('collapsed', style({
          transform: 'rotate(0deg)'
        })),
        state('expanded', style({
          transform: 'rotate(180deg)'
        })),
        transition('expanded &lt;=&gt; collapsed',
          animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
        ),
      ])
    ]
  })
  
  export class MenuListItemComponent implements OnChanges {
    expanded ? : boolean;
    @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
    @Input() item: NavItem;
    @Input() depth: number;
  
    constructor(public router: Router) {
      if (this.depth === undefined) {
        this.depth = 0;
      }
    }
  
    ngOnChanges(changes) {
      // debugger;
      const item: NavItem = changes.item.currentValue || {};
      if (item.children &amp;&amp; item.children.length) {
        let routeName = this.router.url;
        this.expan
  
        ded = this.item.children.findIndex(x =&gt; routeName.includes(x.route)) &gt; -1;
        // }
      }
    }
  
    onItemSelected(item: NavItem) {
      // debugger;
      if (!item.children || !item.children.length) {
        this.router.navigate([item.route], {
          queryParams: item.params || {}
        });
        // this.navService.closeNav();
      }
      if (item.children &amp;&amp; item.children.length) {
        this.expanded = !this.expanded;
      }
    }
  
    isActiveRoute(item: NavItem): boolean {
      if (!item.route) {
        return false;
      }
      let routeIndex = this.router.url.indexOf('?'),
        isExact = routeIndex &gt; -1 ? false : true;
  
      if (item.route == '/web/Manage-Users/user' || item.route == '/web/client')
        isExact = true;
  
      return this.router.isActive(item.route, isExact);
    }
  
  }
  
  </code></pre>