如何在点击事件中更改glyphicon图标类？

Question

I have list of submenu at the sidebar with an glyphicon icon. My one li is clicked the icon should be changed. At the moment when I click on one li all the icon are being changed.

This is the code I am working on. I am not sure how to fix this issue.

HTML

<ul class="nav third-nav">
    <li appExpandMenu (click)="changeIcon()">
        <a>
            <span class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
            <span class="third-menu-title">Sales</span>
        </a>
    </li>
    <li>...</li>
</ul>
<ul class="nav third-nav">
    <li appExpandMenu (click)="changeIcon()">
        <a>
            <span class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
            <span class="third-menu-title">Report</span>
        </a>
    </li>
    <li>...</li>
</ul>

ts.

export class SidebarComponent implements OnInit {   
    sign = 'up';

    changeIcon(): void {
        if (this.sign == 'up') {
            this.sign = 'right';
        } else {
            this.sign = 'up';
        }
    }
}

Answer 1

如果您对代码有任何疑问，请在此处给出您需要的工作示例 。