How to show only selected item information in angular - html

Question

In my project I have this Help/FAQ Dialog. I'm trying make
only selected information to display but not sure how to do that so I would be really appreciated if I can get any help or suggestion.
For example,
when the user selected Item 1 from expansion panel, The right columns will display only Item 1 information and hide the others.
<div mat-dialog-content class="dialog-container">
<div class="container-inside-dialog">
<div class="row">
<div class="column left" style="background-color:pink">
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 1
</mat-expansion-panel-header>
<a mat-list-item routerLink>Item 1</a>
<a mat-list-item routerLink>Item 2</a>
<a mat-list-item routerLink>Item 3</a>
</mat-expansion-panel>
</mat-nav-list>
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 2
</mat-expansion-panel-header>
<a mat-list-item routerLink>Item 4</a>
<a mat-list-item routerLink>Item 5</a>
</mat-expansion-panel>
</mat-nav-list>
</div>
<div class="column right" style="background-color:grey">
<!-- Show this only when Item 1 is selected -->
<h2>Item 1</h2>
<p>Some text for Item 1..</p>
<p>more text.......</p>
<!-- Show this only when Item 2 is selected -->
<h2>Item 2</h2>
<p>Some text for Item 2..</p>
<!-- Show this only when Item 3 is selected -->
<h2>Item 3</h2>
<p>Some text for Item 3..</p>
<!-- Show this only when Item 4 is selected -->
<h2>Item 4</h2>
<p>Some text for Item 4..</p>
<!-- Show this only when Item 5 is selected -->
<h2>Item 5</h2>
<p>Some text for Item 5..</p>
</div>
</div>
</div>
</div>
This is my stackblitz project https://stackblitz.com/edit/mat-expansion-panel-bn9uwv
Thank you

Answer 1

Do it in steps
1-detect click on each item u want to be clicked
2-identify each click separately
3-store each click index or number
4-using that number show only desired item
here is code
Component
import {Component} from '#angular/core';
/**
* #title Basic expansion panel
*/
#Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
panelOpenState = false;
clickedIndex = -1;
clicked(index:number){
this.clickedIndex = index;
console.log(index);
}
}
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
Template
<div mat-dialog-content class="dialog-container">
<div class="container-inside-dialog">
<div class="row">
<div class="column left" style="background-color:pink">
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 1
</mat-expansion-panel-header>
<a mat-list-item routerLink (click)="clicked(1)">Item 1</a>
<a mat-list-item routerLink (click)="clicked(2)">Item 2</a>
<a mat-list-item routerLink (click)="clicked(3)" >Item 3</a>
</mat-expansion-panel>
</mat-nav-list>
<mat-nav-list>
<mat-expansion-panel>
<mat-expansion-panel-header>
Header 2
</mat-expansion-panel-header>
<a mat-list-item routerLink (click)="clicked(4)" >Item 4</a>
<a mat-list-item routerLink (click)="clicked(5)">Item 5</a>
</mat-expansion-panel>
</mat-nav-list>
</div>
<div class="column right" style="background-color:grey">
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==1">
<h2>Item 1</h2>
<p>Some text for Item 1..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 2 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==2">
<h2>Item 2</h2>
<p>Some text for Item 2..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==3">
<h2>Item 3</h2>
<p>Some text for Item 3..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==4">
<h2>Item 4</h2>
<p>Some text for Item 4..</p>
<p>more text.......</p>
</ng-container>
<!-- Show this only when Item 1 is selected -->
<ng-container *ngIf= "clickedIndex == -1 || clickedIndex ==5">
<h2>Item 5</h2>
<p>Some text for Item 5..</p>
<p>more text.......</p>
</ng-container>
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center start">
<span style="flex-grow: 1;"></span>
<button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
matTooltip="Close Help">Close</button>
</div>
</div>