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 >
  <div >
    <i ></i>
    <span >Menu</span>
  </div>
  <ul >
    <li [ngClass]="{ selected: selectedTab === 'market' }">
      <a
        routerLink="market"
        (click)="selectElementMenu(); selectedTab = 'market'"
      >
        <i ></i>
        <span >Market</span>
      </a>
    </li>
  </ul>
</div>
<section >
  <nav>
    <div >
      <i ></i>
      <span >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.

CodePudding user response：

Simply use *ngIf to conditionally render icon

<span >Market</span>
<i  *ngIf="selectedTab != 'market'"></i>
<i  *ngIf="selectedTab == 'market'"></i>