How to change class on click?


I am trying to make a list appear or disappear on button click. It (obviously) not working. Any help?

    <div *ngFor="#item1 of ListOfItem" >
        <div *ngIf=" item1.listofitem > 0 " >
        <button ng-click="Collapsable = !Collapsable" > Nombre de lettre {{item1.title}}</button>
      <ul ng-class="Collapsable ? '' : 'collapseditem'">
        <li *ngFor="#theItem of item1.listofitem">{{theItem}}</li>      

And I declare a “Collapsable” boolean in my ts file.

public Collapsable :boolean;

The css:

            line-height: 0; 
            background-color:  red;

Rather than using ng-class in ul tag try using ng-if. It should work fine

<ul ng-if="Collapsable ? '' : 'collapseditem'">
    <li *ngFor="#theItem of item1.listofitem">{{theItem}}</li>      


THanks. It is working like a charm…but I’d like only the click item to be shown/hidden. Any idea?

Hi I did not get you. Can you be more precise like show the code where you want the functionality to be working as you required.

I have found a solution by putting all the boolean in an array but it is not wroking.

<button ng-click="Collapsable["the index of the item] = !Collapsable["the index of the item]" >

What I want is to hide/show the

    element when button is click.
    In jquery it would be something like:
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {


For each element, the is a button and an ul. I want to be able to show or hide the ul on click
(code like)

ul list

ul list

ul list

  <div *ngFor="#item1 of FullArray">
    <div *ngIf=" item1.contain.length > 0 " >
    <button ng-click=" item1.Display = !item1.Display " > {{item1.SomeTexte}}</button>
  <ul *ngIf="item1.Display ">
    <li *ngFor="#theseitems of item1.contain" > {{theseitems}}</li>      
FullArray = new Array<SomeModel>()

class WordsListModel {   
    public constructor(public SomeTexte : string, public Words : string[], public Display :boolean){

I found my way by doing a funciton:
<button (click)=“ShowHide(items)” >

I’m surprised ng-click works at all. I thought it had to be (click) now.

you are right!! I figured it out.

Best answer I have found about dynamic styling so far.