Menu
I have list items as follows in below code snippet. On mouse click I would like to select that item (add 'active' class and deselect if any other items (siblings) selected by remove'active class. I have achieved the same using jQuery (full code below). How I can achieve the functionality in Angular 2 way.
Code snippet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="grouplist" class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
<li class="list-group-item">Item4</li>
<li class="list-group-item">Item5</li>
<li class="list-group-item">Item6</li>
<li class="list-group-item">Item7</li>
<li class="list-group-item">Item8</li>
<li class="list-group-item">Item9</li>
<li class="list-group-item">Item10</li>
</ul>
<script>
$(function () {
$('.list-group li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
})
</script>
</body>
</html>
JSFiddle here
Angular 2 Experiment: I am able to set class via 'setElementClass'. How to remove 'active' class from siblings? Or is there any other approaches?
List view component (test1.component.html):
<h2>Select List Item</h2>
<ul id="grouplist" class="list-group">
<li class="list-group-item" (click)="listClick($event)" *ngFor="let item of groups">
{{ item.name }}
</li>
</ul>
TypeScript Code (test1.component.ts):
import { Component } from '@angular/core';
import { Renderer } from '@angular/core';
import { Group } from './group';
@Component({
selector: 'test1',
template: require('./test1.component.html')
})
export class Test1Component {
groups: Group[];
constructor(private render: Renderer) {
this.groups = [new Group("item1"), new Group("item2"), new Group("item3"), new Group("item4"), new Group("item5")];
}
public listClick(event: any) {
event.preventDefault();
this.render.setElementClass(event.target, "active", true);
// How to remove 'active' from siblings ?
}
}
group.ts
export class Group {
constructor(public name: String) {
}
}
903
How Do You Add An Active Class To A List? Create a div with specific id (here id=”text”) on click on div call a method makeActive() Define a function makeActive() in side tag. Inside makeActive() getElementById. Get Elements classList and add class active.
removeClass("active"); $(this). addClass("active"); }); This will remove the active class when clicked then add it to the current item being clicked.
You can use ngClass for what you are looking for:
<ul id="grouplist" class="list-group">
<li class="list-group-item" [ngClass]="{'active': selectedItem == item}" (click)="listClick($event, item)" *ngFor="let item of groups">
{{ item.name }}
</li>
</ul>
And in your listClick just set the selected item to that item:
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue; // don't forget to update the model here
// ... do other stuff here ...
}
You can also just pass the index of the li element to your component during a click event:
<ul id="grouplist" class="list-group">
<li *ngFor="let item of items; let i=index" (click)="select(i)"
[ngClass]="{'active': selectedIndex == i, 'list-group-item': true}" >
{{ item.text }}
</li>
</ul>
Then let you component set its selectedIndexproperty:
@Component({
...
})
export class ItemListComponent {
...
selectedIndex: number;
select(index: number) {
this.selectedIndex = index;
}
}
The selectedIndexis used by the template to determine whether to assign the active class to the li element.
See it in this Plunker
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
