Угловой скрыть и показывая несколько делений

Question

Вряд ли новичок в angular, и я пытался найти в Интернете примеры того, чего я пытаюсь достичь, но все эти примеры, похоже, не помогают мне

У меня есть 5 вкладок, каждая вкладка представляет собой объем информации. Я хочу, чтобы он первоначально отображал информацию о первых блоках, но когда вы щелкнете по другим блокам, он заменит ее на информацию о других блоках

Так что, в основном, прятки. Только показывая информацию о коробке, которую я нажал. Вот схема того, что я имею в виду 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

Answer 1

измени свой .html как этот

<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>

добавьте эту строку в ваш .ts файл под компонентом.

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

Answer 2

надеюсь, я смогу помочь!

Сначала я установил бы поля содержимого на display: none; (используя css), а затем прикрепил функцию click к вашим div-элементам .box, которая может выглядеть следующим образом:

<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>

Кроме того, мой первый выбор - использовать такую ​​библиотеку, как Material или даже начальную загрузку, чтобы вам не пришлось беспокоиться обо всей этой логике / стиле. Но в любом случае, надеюсь, это поможет!