Angular 2 - 点击更改图标

Question

I have a materialize collapsible list in my angular2 application. What I want to do, is change the icon of the list item when someone clicks on it. So far I attached a click event onto the list. When I print this out to the console, I see the element reference. So I'm able to look down the child nodes and find the li element that has the active class attached to it. My thinking is that once I find the active element I can just change the child node's icon to the new one. This way I don't change all the icons. However, when I try to set the icon to the new icon, I get TypeError: 0 is read-only . Does anyone know how to do this via angular 2?

Plunker
https://plnkr.co/edit/jQWf7uIRZIwr4fhyFT03?p=preview

List

  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Desired Behavior: Basically I'm trying to make a drop down tree using materlize collapsible list. So you click on an item it changes its icon from a plus sign to a minus sign to simulate that you are expanding and contracting the item.

Picture Example Link

Answer 1

Angular only solution (no jQuery needed)

You can simply toggle between two icons using a variable that you change on click:

<div class="collapsible-header" (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst">filter_drama</i><i class="material-icons" *ngIf="!showFirst">place</i>First Section</div>

If you want only to hide the icon, you do it the same way with only one icon:

<div class="collapsible-header" (click)="showSecond=!showSecond"><i class="material-icons" *ngIf="!showSecond">place</i>Second Section</div>

I forked your plunker and edited the changes here

PS: On your plunker you were loading material icons from a http url, making chrome to refuse to load the resource. Change the url to https and it will work.

Edit

@Judson Terrell - for me, Angular only solution looks cleaner

Angular only

<div class="collapsible-header" (click)="!show=show"><i class="material-icons" *ngIf="show">filter_drama</i>First</div>

Angular + jQuery

html

<div class="collapsible-header" id="clickedId"><i class="material-icons" id="someId">filter_drama</i>First</div>

js

$( "#clickedId" ).click(function() {
  $("#someId").toggleClass('someIconClass');
});

+ jQuery lib - and the presumable performance problems it induces

Edit2 - after clearing the question

What you want is achievable using CSS only:

html:

<div class="collapsible-header"><i class="material-icons more">expand_more</i><i class="material-icons less">expand_less</i>First Section</div>

css:

.collapsible-header.active i.more{
display:none;
}

.collapsible-header.active i.less{
display:block;
}

.collapsible-header i.less{
display:none;
}

Updated plunker here

Credit for idea to this answer

Answer 2

I would recommend toggling a class change based on the icon you want to add or remove someIcon class on the i tag.

In jQuery it's

$(el).toggleClass('someIconClass')

I personally have not had much luck with elementRef etc in Angular 4 and have resorted to putting jQuery in my apps. Just a suggestion (not best practice I am sure someone will argue)

Answer 3

I peeked at the code for Angular materialize, and it appears its a sort of angular 'shim' that uses jQuery and some other workarounds to make this CSS/JS framework work properly in Angular 2. That makes something like what you want a little trickier than it would be if it was pure Angular 2.

The 'Angular way', would be to have each menu item a separate component that keeps track of its own state. It would keep track of whether its expanded or collapsed, and it could even output an event based on that state, which would make changing the icon trivial. It could even keep track of the number of times its been clicked and slowly change colors as its clicked more and more. Stuff like that is really easy when everything is encapsulated in its own component.

In lieu of that you'll have to manage the menu states manually, using something like an array of booleans. The problem with this is that you'll have 2 separate view states managed in different places for the same thing - and they may not always be in sync. One in the component for your icons, and one in ... wherever that materialize code is coming from ... The materialize code may be using a CSS :active selector to change something on click, and you may use a (click) handler in Angular to change something on a click, and those 2 things aren't always guaranteed to be in sync for a number of reasons. So if they ever get out of sync the icons will be backwards and it will be hard to fix.

In fact, this may be a situation where it actually is easier to use jQuery from within Angular, simply bc the technology you are working with uses jQuery as well.

But if you reaalllly want it to work in Angular using this framework, here's how you could do it, just be forewarned that it will be very fragile.

I would create an array of objects in your component that represented the menu. Each object could hold its menu text, expanded text, and a boolean representing its expanded/collapsed state.

You could define an interface outside the component to give you type checking on this if you wanted.

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

See... by the time you get this working in Angular, you probably could have just built your own menu item components which would be easier to work with and far more scaleable :) You're creating an array of objects with several different properties per object and trying to manage them with each click. This is why components were created! You could create a simple wrapper component for each item, but I'm not sure how that would work since the materialize thing is using jQuery and CSS to select for stuff. It might be unpredictable using normal component view encapsulation.

An alternative to switching out the icons with ngIf would be binding to the innerText property, and switching the text based on the state.

<i class="material-icons"  [innerText]="item.state ? 'plus-icon' : 'minus-icon'"></i>

But I'm not sure if the materialize framework would pick up on the changes to the innerText quickly or at all. Better to have both render, and switch between them, if you're trying to mix technologies like this.

Also, i have no idea if 'plus-icon' or 'minus-icon' are how you would refer to those icons, but you probably get the point :p