/Javascript/AngularJS/Change icon on click angular

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
     }   
 }

Source: stackoverflow.com

Similar codes

2 votes419 views4 answers
How to run resize event only on client side angular
Javascript AngularJS
0 vote293 views1 answer
Url validation in formcontrol angular 8
Javascript AngularJS
0 vote301 views1 answer
Apply custom border color in angular material
Javascript AngularJS
18 votes332 views2 answers
Check angular version
Javascript AngularJS
0 vote289 views1 answer
Angular material remove outline
Javascript AngularJS
2 votes282 views3 answers
This version of CLI is only compatible with Angular versions 0.0.0 || ^10.0.0-beta || >=10.0.0 <11.0.0, but Angular version 9.1.3 was found instead.
Javascript AngularJS
0 vote355 views2 answers
How to run angular application in visual studio code
Javascript AngularJS
9 votes290 views1 answer
Angular ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Javascript AngularJS
0 vote322 views1 answer
Angular cannot access event.target.value of input element using $event
Javascript AngularJS
0 vote275 views1 answer
Import jquery into angular 8
Javascript AngularJS