Así que creé un componente de la bandeja de entrada que se encuentra en el enrutamiento anidado de la página principal, ANTES de eso, intento crear una página que se vea y funcione de manera similar a la aplicación web de Gmail.

Entonces, necesito crear un conjunto de tres cuadros div en los que se pueda hacer clic y cuando se hace clic en uno, necesito mostrar una lista de matrices que he almacenado en el componente ts. ¿Qué código de función debo escribir para que se pueda hacer clic en el DIV y cuando haga clic en onclick() necesito mostrar la lista en la matriz ...

este es mi código html (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>

este es mi componente ts (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(){} }