I'm trying to follow an example showing how to bind a class active to a component when it's clicked. When I execute the code based on the markup below
<div *ngFor="let menu of menus;"
[id]="menu.id"
(click)="onClick($event,menu.link)"
[ngClass]="'active':menu.active"
class="navigator">
{{menu.title}}
</div>
I get the following error. NB - there's onClick(...) method in the component and at the moment I commented out all its contents. The error seems to be purely related to the markup (unless I need to declare something extra in the component, like an array or such). At least as far I've seen the examples while googlearching this issue.
Uncaught Error: Template parse errors:
Parser Error: Unexpected token ':' at column 9 in ['active':menu.active] in ng:///AppModule/NavigatorComponent.html@11:9 ("
[id]="menu.id"
(click)="onClick($event,menu.link)"
[ERROR ->][ngClass]="'active':menu.active"
class="navigator">
{{menu.title}}
"): ng:///AppModule/NavigatorComponent.html@11:9
What am I missing?
'active':menu.active isn't a valid expression.
User either the object literal syntax
[ngClass]="{'active':menu.active}"
or the string syntax
[ngClass]="menu.active ? 'active' : null"
or
[class.active]="menu.active"
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments