Click here to Skip to main content
14,644,129 members
Rate this:
Please Sign up or sign in to vote.
See more:
on click an English button it shows its corresponding div at the same time if I clicked on another button then it shows its div but the previous one not closed. I want that on click English it shows the div and on again click it close.
Note that makes it dynamically because I don't know how many lang are there.
make sure you don't make it for static data.

here is link of my standalone example in
stackblitz
<pre><a href="https://stackblitz.com/edit/angular-showhide-088?file=src%2Fapp%2Fsho-hide%2Fsho-hide.component.html"></a>


What I have tried:

onclickEnglishDiv(clickLang,index){

  if (this.visibleIndex === index) {
    this.visibleIndex = -1;
  } else {
    this.visibleIndex = index;
  }


Html
<pre>    <div *ngFor="let lang of langList;let index = index" >
          <div class="engbutton">
              <button class="englishButton" (click)="onclickEnglishDiv(lang,index)">{{ lang }}</button>
              <div *ngIf="visibleIndex === index" class="knowEnglish">
                <div>
                  <div *ngFor="let data of filteredLangList" class="engDivObj">{{data.name}}</div>
                </div>
              </div>
            </div>
      </div>
Posted
Updated 2-Dec-19 21:59pm
v3
Comments
Mehul M Thakkar 29-Nov-19 3:33am
   
so what is the problem? The example is working as per your need.
[no name] 29-Nov-19 5:53am
   
I want that on click English it opens its eng div and on click Hindi, it opens its Hindi div but not to be close the eng div.
>user can see all the div at a time.
> I want it to be dynamically

here is the link you can see how it show .i want this.
https://stackblitz.com/edit/angular-nxjuby-vxxeqf?file=src/app/app.component.ts

but I am unable to understand this one.
could you convert it to angular 7
Mehul M Thakkar 29-Nov-19 6:18am
   
because visibleIndex is updating everytime. you need to create different array for visibility for each language.

Declare visibleLang:any[]=[]
and add a line in onclickEnglishDiv function,
this.visibleLang[clickLang] = !this.visibleLang[clickLang];

In template change in if condition visibleIndex === index to

visibleLang[lang]
[no name] 2-Dec-19 2:25am
   
thanks, bro, it is working.
ZurdoDev 2-Dec-19 13:19pm
   
please post as solution.
Mehul M Thakkar 3-Dec-19 4:00am
   
posted as a solution.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

VisibleIndex is updating every time. you need to create different array for visibility for each language. Declare
visibleLang:any[]=[];

and add a line in onclickEnglishDiv function,
this.visibleLang[clickLang] = !this.visibleLang[clickLang];

In template change in if condition
visibleIndex === index

to
visibleLang[lang]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100