error This is the error i got after upgrading to angular 10.Is there anything to change. What can i change to solve it.

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 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.

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 <=> 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 && item.children.length) {
      let routeName = this.router.url;
      this.expan

      ded = this.item.children.findIndex(x => routeName.includes(x.route)) > -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 && item.children.length) {
      this.expanded = !this.expanded;
    }
  }

  isActiveRoute(item: NavItem): boolean {
    if (!item.route) {
      return false;
    }
    let routeIndex = this.router.url.indexOf('?'),
      isExact = routeIndex > -1 ? false : true;

    if (item.route == '/web/Manage-Users/user' || item.route == '/web/client')
      isExact = true;

    return this.router.isActive(item.route, isExact);
  }

}

CodePudding user response：

You need to initialize a value to expanded before assigning it as value to other variables.

export class MenuListItemComponent implements OnChanges {
      expanded?: boolean = true/false;
      @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;

Note, you can also assign null to expanded .

export class MenuListItemComponent implements OnChanges {
      expanded?: boolean = null;
      @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;