Breaking News: Grepper is joining You.com. Read the official announcement!

change icon on click angular

Comfortable Cat answered on February 11, 2021 Popularity 7/10 Helpfulness 3/10

answer change icon on click angular

related change icon on click angular

change icon on click angular

Comment

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

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: angular click javascript

Link to this answer
Share Copy Link

Contributed on Feb 11 2021

Comfortable Cat

0 Answers Avg Quality 2/10

Closely Related Answers

change icon on click angular

Comment

change icon on click angular

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: click javascript angular

Link to this answer
Share Copy Link

Contributed on Mar 01 2022

Kavya Sri

0 Answers Avg Quality 2/10

change icon on click angular

Contents

More Related Answers

change icon on click angular

Closely Related Answers

change icon on click angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.