Angular hide and showing multiple divs

Question

Farely new to angular, and I've tried looking online for examples of what I'm trying to achieve, but all of the examples don't seem to be helping me

I have 5 tabs, each tab represents a body of info. I want it to originally show the first boxes info, but when you click on the other boxes, it will replace it with the other boxes info

So basically, a hide and show. Only showing the info of the box I clicked. Heres a layout of what I mean HTML:

<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

<div class="box1-content">Lorem ipsum 1</div>
<div class="box2-content">Lorem ipsum 1</div>
<div class="box3-content">Lorem ipsum 1</div>
<div class="box4-content">Lorem ipsum 1</div>
<div class="box5-content">Lorem ipsum 1</div>

CSS:

 .boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    }

    .box {
     height: 100px;
     background: red;
    }

https://codepen.io/anon/pen/gZZYpR

Use *ngIf. You should read the Angular documentation at length. — Soumya Kanti
– Soumya Kanti, Commented Jan 13, 2019 at 7:28

Imon · Accepted Answer · 2019-01-13 07:29:07Z

7

change your .html like this

<div class="boxes">
<div class="box" (click)="tabToggle(1)">box1</div>
<div class="box" (click)="tabToggle(2)">box2</div>
<div class="box" (click)="tabToggle(3)">box3</div>
<div class="box" (click)="tabToggle(4)">box4</div>
<div class="box" (click)="tabToggle(5)">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

add this line on your .ts file's under component.

  showTab = 1;
  tabToggle(index){
    this.showTab =index;
  }

answered Jan 13, 2019 at 7:29

Imon

6591 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromme Lawn Over a year ago

Hey do you happen to have a working codepen link? I tried your code but it doesn't seem to be working codepen.io/anon/pen/gZZYpR

Imon Over a year ago

Please check stackblitz url link

Jaromme Lawn Over a year ago

Awesome! Thank you for helping!

Omar · Accepted Answer · 2019-01-13 07:20:21Z

hope I can help some!

First I would set the content boxes to display: none; (using css) and then attach a click function to your .box divs which might look like this:

<div class="boxes">
<div class="box" (click)="showThis = 'show1'"></div>
<div class="box" (click)="showThis = 'show2'"></div>
<div class="box" (click)="showThis = 'show3'"></div>
<div class="box" (click)="showThis = 'show4'"></div>
<div class="box" (click)="showThis = 'show5'"></div>
</div>

<div class="box1-content" *ngIf="showThis == 'show1'">Lorem ipsum 1</div>
<div class="box2-content" *ngIf="showThis == 'show2'">Lorem ipsum 1</div>
<div class="box3-content" *ngIf="showThis == 'show3'">Lorem ipsum 1</div>
<div class="box4-content" *ngIf="showThis == 'show4'">Lorem ipsum 1</div>
<div class="box5-content" *ngIf="showThis == 'show5'">Lorem ipsum 1</div>

Also, my first choice would be to use a library like Material or even bootstrap so you don't have to worry about all this logic/styling. But either way, hope this helps!

Collectives™ on Stack Overflow

Angular hide and showing multiple divs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related