toggle down only one div from ng-container with *ngFor

Question

I would like to toggle down only one div among multiple divs by clicking one of button

HTML code

<ng-container *ngFor = "let m of images">
<button (click) = "toggle(m[m.length-1])"><img src = {{m[0]}}/></button>
   <div id = "toggle" *ngIf = "chosen" [@toggle] = 'status'>
    <ul>
    <li *ngFor = "let z of clicked | slice: 0 : 10;"><img src = {{z}}/></li>
    </ul>
   </div>
   <br />
</ng-container>

In *ngFor = "let m of images, m is Array<string[]> and at index 0 image is stored and at index 1 unique id is stored. So I get that id for function, toggle(). In toggle there is another Array<string[]>, memberimages, that has 10 images from index 0 to 9 and have unqiue id at the last index. so compare id with id in this.memberimages and if it is same, then set chosen as true and save the matching string[] from this.memberimages to this.clicked and that is used in li tag.... hope the explanation is understandable.... :(

toggle(id: string){
        this.status = this.status === 'open' ? 'close' : 'open';
        if(this.status != 'close')
        {
            this.memberimages.forEach((item, index) =>{
                if(item[item.length-1] == id){
                    this.clicked = item;
                    this.chosen = true;
                    index = this.memberimages.length;
                }   
            });
        }
        else
        {
            this.chosen = false;
        }       
}

Animation

  animations:[
    trigger('toggle', [
        state('open', style({
            'opacity' : '1',
            'display' : 'block' 
        })),
        state('close', style({
            'opacity' : '0',
            'display' : 'none'
        })),
        transition('open => close', animate('1000ms ease-in-out', style({
            'opacity':'0',
            'display' : 'none'
        }))),
        transition('close => open', animate('1000ms ease-in-out', style({
            'opacity':'1',
            'display' : 'block'
        })))
    ])
]

CSS for div id = "toggle" is simply display: none;

what I expected was if I click one of buttons(5 in total), values should be toggled down under that button ONLY. However, what is actually happening is that once I click one of the buttons, values are correct but every button had toggled div with same values at once and I don't see any animation effect How can I match one div one button so that each button has a right values and only toggled div?

PS: Apologize for my bad English.. :(

oh you mean demo right? I am sorry I am new to Stackoverflow. Can you tell me how? :( — dsoup2
Please click on this link. It will fork a starter Angular Project for you. You can make your changes on the top of it and share it here: stackblitz.com/fork/angular — SiddAjmera

Chellappan வ Chellappan வ · Accepted Answer · 2018-09-01T01:30:43

Try this

Create new variable

Toggle =[]

Then Use index to track the element

<ng-container *ngFor = "let m of images; let i=index ">
<button (click) = "toggle(m[m.length-1]);Toggle[i] =! Toggles[i] "><img src = {{m[0]}}/></button>
   <div id = "toggle" *ngIf = "Toggle[i]" [@toggle] = 'status'>
    <ul>
    <li *ngFor = "let z of clicked | slice: 0 : 10;"><img src = {{z}}/></li>
    </ul>
   </div>
   <br />
</ng-container>

toggle down only one div from ng-container with *ngFor

1 Answers