up arrow, down arrow on a menu and hidden submenu

I’m still new to Angular and would like to create a menu with a down arrow like this:

illustration – 1

When I click on Market, a submenu is shown, and the arrow is up.

illustration – 2

I don’t understand how to I can get this same result.

my menu

admin.component.html

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links">
    <li [ngClass]="{ selected: selectedTab === 'market' }">
      <a
        routerLink="market"
        (click)="selectElementMenu(); selectedTab = 'market'"
      >
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">Market</span>
      </a>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
  </nav>
  <router-outlet></router-outlet>
</section>

admin.component.ts

export class AdminComponent implements OnInit {
  constructor() {}

  elementMenu: boolean = false;
  selectedTab!: string;

  ngOnInit() {}

  selectElementMenu() {
    this.elementMenu = !this.elementMenu;
  }
}

The code is on Stackblitz

I thank you in advance for your help.

>Solution :

Simply use *ngIf to conditionally render icon

<span class="links_name">Market</span>
<i class="bx bx-chevron-down" *ngIf="selectedTab != 'market'"></i>
<i class="bx bx-chevron-up" *ngIf="selectedTab == 'market'"></i>