I am working on an Angular UI that has three tabs at the top of the screen that have email sounding names like "inbox," "sent" and "deleted." Each time a tab is clicked a new collection of objects is returned from an API call and a list is populated on the left side of the screen.
This is the HTML with the *ngFor to make the middle list for "sent" items:
<tab heading="Sent" (selectTab)="Sent($event)">
<div class="sentScroll">
<div #sentItems *ngFor="let msg of sentMessObj; let i=index">
<a class="list-group-item list-group-item-action" [ngClass]="{'active': msg == activeMess}" (click)="activeMessage = msg; popItSent(i)">
<span id="msgSubject">{{msg.Mess[0].Subject}}</span><br /><span class="dateTimeCls" id="datetime1">{{msg.Mess[0].Updated | date : 'short'}}</span>
</a>
</div>
</div>
</tab>
And the "Sent" function (minus the details for the JSON processing, since that works and likely not relevant):
Sent($event) {
this.sentMessagesObj = [];
this.activeTab = $event.heading;
this._dataService.getSentMessages().subscribe(data => {
// Iterate through Conversations
for(let j = 0; j < data['returnedEntity']['conversationList'].length; j++) {
...
// Iterate through Messages within each Conversation
for(let k = 0; k < data['returnedEntity']['conversationList'][j]['messages'].length; k++) {
... }
this.sentMessObj.push(convo);
}
});
}
The above function calls the API, returns JSON and puts a list into the "sentMessObj," which gets displayed on the left side of the screen in divs.
What I'm hoping to have happen is when someone clicks on the "Sent" tab, the app automatically selects the first item in the list and clicks it, which triggers the "popItSent()" function, which displays detailed text on the right side of the screen.
So far, I have tried using an #items selector, referencing that with @ViewChildren('items') liItems: QueryList, calling ngAfterViewInit() and then calling .click() on a ".nativeElement.firstChild as HTMLElement," but I have not been able to get this method to respond at all except on the first tab called "inbox," which is also the first tab that displays.
Basically, all I'm looking for is when a tab is selected, the app finds the first div element on the left and automatically clicks it, which makes it active and calls the corresponding (click) function. Do I necessarily need to call a click event to accomplish this?
Any advice, direction or suggestions would be greatly appreciated! Thank you!
You don't need click trigger. You should create one more variable which is related to model that is in your list. Then in view show this model when click any item in list. When you change tab then just assign first element to this model. Think that you have class
export class Data{
//inside here your data model coming from api which is inside sentMessObj
}
in component
sentMessObj:Data[]=[];
then when you get data from api you assign it to Data[] array . And create one more variable like below
showingMessage:Data;
you will show this variables attributes in html and for click you fill this variable.
then if you click tab after you filled sentMessObj then just firs element like
this.showingMessage=this.sentMessObj[0];