В выпадающем списке городов надо сделать **currentCity** цвет color: greenyellow , но синтаксис [class.name]="expression" не сработал

В html модуле прописал это:

<a              class="navigation__dropdown-menu-item"
                *ngFor="let city of cities"
                (click)="setCurrentCity(city); cityDropdown = false"
                [class.active]="city.id === currentCity" //эта строчка не работает
              >
                {{ city.name }}
              </a>

В scss модуле добавлено это

.navigation__dropdown-menu-item {
&.active {color: greenyellow;}
&:hover {color: $primary-color;} 
}

Должно всё работать, не понимаю что же не так?