Sulot
May 15, 2016, 2:24pm
1
Hi,
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>
</ul>
</div>
</div>
And I declare a “Collapsable” boolean in my ts file.
public Collapsable :boolean;
The css:
.collapseditem{
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>
</ul>
Sulot
May 15, 2016, 2:37pm
3
Hi,
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.
Sulot
May 15, 2016, 3:11pm
5
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() {
});
});
Sulot
May 15, 2016, 3:54pm
6
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)
button
ul list
button
ul list
button
ul list
Sulot
May 15, 2016, 4:58pm
7
<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>
</ul>
</div>
FullArray = new Array<SomeModel>()
class WordsListModel {
public constructor(public SomeTexte : string, public Words : string[], public Display :boolean){
this.SomeTexte=SomeTexte;
this.Words=Words;
this.Display=Display;
}}
Sulot
May 15, 2016, 5:06pm
8
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.
Sulot
May 15, 2016, 9:52pm
10
you are right!! I figured it out.
Best answer I have found about dynamic styling so far.