How to use class with class conditional - html

Question

I am trying to use both regular class attribute and class conditional attribute in an html element below:
<ul *ngIf="showDropdown">
<li class="active" [class.active]="sIndex === x" (click)="dropdownSelect($event.target.value, x)" value="18203">All Groceries</li>
<li [class.active]="sIndex === x" (click)="dropdownSelect($event.target.value, x)" *ngFor='let i of lists; let x = index' value="{{i.id}}">{{i.name}}</li>
</ul>
I have the first li I want to be active but have click attribute which toggles click. Any ideas?

Answer 1

You can use
[ngClass]={"active": sIndex === x}
But in your code you already have the class "active" by default, so nothing will change, always going to have the active class.
explain more, what you want to do.

Answer 2

You're example is looking weird ,
the first li is always active no matter what will happen , and both of li have the same condition that makes them active .
Try this
<ul *ngIf="showDropdown">
<li [class.active]="sIndex === x" (click)="dropdownSelect($event.target.value, x)" value="18203">All Groceries</li>
<li [class.active]="sIndex !== x" (click)="dropdownSelect($event.target.value, x)" *ngFor='let i of lists; let x = index' value="{{i.id}}">{{i.name}}</li>
</ul>
This is the right way to add a class in case its true
[class.active]="sIndex === x"

Answer 3

I figured the answer out. So if you want to have a conditional where active class changes when you click, but want an active class on any element first you do the following:
[ngClass]="{'active': sIndex === x || first}" (click)="dropdownSelect($event.target.value, x)"
add a conditional parameter with your toggle active class on click.
constructor(private api: API, private http: Http) {
this.first = true;
}
you set first to true in in your constructor. then when someone clicks, you put it into function and set it to false;
dropdownSelect(v, x: number) {
this.filter = v;
this.sIndex = x;
this.showDropdown = !this.showDropdown;
this.first = false;
}