So I have created an inbox component which is under nested routing of the main page , BEFORE that I'M trying to create a page that looks and works similarly like the Gmail web app.

So I need to create a set of three div boxes which is clickable and when one is clicked I need to show one list of array that I have stored in the ts component. what function code should I write that makes the DIV Clickable & when onclick() I need to show the list in the array....

this is my html code(inbox.component.html)

<div class="mails" *ngFor="let obj of mail;index as i" (click)="showMessage()" style="cursor:pointer">
    <div id="test">
        {{obj.id}}
    </div>
</div>

this is my ts component(inbox.component.ts)

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html',
  styleUrls: ['./inbox.component.css']
})
export class InboxComponent implements OnInit {
       
mail=[] as any;
constructor() { 
  
    this.mail=[
      {
      id:1,
      subject:'test1',
      sender:'op',
      message:'hello, how are you',
      },
      {
      id:2,
      subject:'test2',
      sender:'ak',
      message:'hi,who are you'
      }
  ]
  }
  
  ngOnInit(): void {}
  
showMessage(){}
  
}