change icon on click angular
import { Component } from '@angular/core'
export interface CollapsibleItem {
label: string;
text: string;
state: boolean;
}
@Component({
selector:'whateveryouwant',
template: `
<ul class="collapsible" data-collapsible="accordion">
<li *ngFor="let item of menuItems; let i = index" (click)="menuClick(i)">
<div class="collapsible-header">
<i class="material-icons" *ngIf="item.state"> minus-icon </i>
<i class="material-icons" *ngIf="!item.state"> plus-icon </i>
{{ item.label }}
</div>
<div class="collapsible-body">
<span> {{ item.text }} </span>
</div>
</li>
`,
styles: ['']
})
export class YourComponentName {
constructor() { }
menuItems: CollapsibleItem[] = [
{ label: 'First', text: 'Lorem Ipsum', state: false },
{ label: 'Second', text: 'Lorem Ipsum', state: false },
{ label: 'Third', text: 'Lorem Ipsum', state: false },
];
menuClick(clickedItem: number) {
this.menuItems[clickedItem].state = !this.menuItems[clickedItem].state // flips the boolean value for the clicked item
for (let item of this.menuItems) {
if ( item !== this.menuItems[clickedItem] ) {
item.state = false;
}
}
// the for loop goes through the array and sets each item to false *if* its not the item that was clicked
}
}
Are there any code examples left?
New code examples in category Javascript
-
Javascript 2023-04-21 22:52:36
-
Javascript 2022-03-27 22:25:20 javascript download string as file
-
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
-
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
-
Javascript 2022-03-27 21:15:02 javascript regex french phone number
-
Javascript 2022-03-27 21:05:03 cypress custom error message
-
Javascript 2022-03-27 21:00:05 create element javascript with id
-
Javascript 2022-03-27 20:40:57 feather icons react
-
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
-
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password