Ubah Ikon Pada Klik 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
}
}
Comfortable Cat