Here is the markup

<!--my.component.html при загрузке страницы--> <ul> <li class="active">Value 1</li> <li>Value 2</li> <li>Value 3</li> </ul>

Task : by clicking on a list item, add the .active class to it, and remove this class from others.

Difficult to rebuild after js / jquery, please help me figure it out. How to gracefully implement this in angular7?

  • help figure out what? there is no desire to help when a person did not open the documentation, such things are described at the very beginning - overthesanity

1 answer 1

Angular provides a template engine, thanks to which you can write like this:

app.component.html

 <ul> <li *ngFor="let i of items" (click)="select(i)" [class.active]="i.id == selected.id">{{ i.title }}</li> </ul>

app.component.ts

 public selected; ... public select(item) { this.selected = item; }