Как изменить класс значка глифа на событии клика?

Question

У меня есть список подменю на боковой панели со значком глифа.Моя кнопка нажата, значок должен быть изменен.В тот момент, когда я нажимаю на одну кнопку li, все иконки меняются.

Это код, над которым я работаю.Я не уверен, как решить эту проблему.

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

Вот рабочий пример того, что вам нужно, если у вас есть какие-либо вопросы относительно кода, не стесняйтесь спрашивать.