I am working on a page with 2 tabs. One tab is for displaying active messages and the other one is for closed messages.
- If the data active value is true, the active messages section in HTML should be populated accordingly.
- If the data active is false, then the closed messages section in HTML should be filled instead. How can I achieve this?
Below is the HTML code:
<mat-tab label="Active">
<mat-icon for="search">search</mat-icon>
<input type="search" name="search" class="search" placeholder="Company">
<ul>
<li *ngFor="let message of activeMessages" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
<span>{{message.date}}</span>
<img src="{{message.image}}" alt="img" />
<p style="padding-top: 16px;">{{message.name}}</p>
<p ><b>{{message.subject}}</b></p>
</li>
</ul>
</mat-tab>
<mat-tab label="Closed">
<mat-icon for="search">search</mat-icon>
<input type="search" name="search" class="search" placeholder="Company">
<ul>
<li *ngFor="let closemessage of closedMessages" (click)="closeMessage(closemessage)" [class.activeShow]="closemessage.id == message_idc">
<span>{{closemessage.date}}</span>
<img src="{{closemessage.image}}" alt="img" />
<p >{{closemessage.name}}</p>
<p ><b>{{closemessage.subject}}</b></p>
</li>
</ul>
</mat-tab>
In the TypeScript file, I have the following code:
this.service
.getMessages()
.subscribe(
data => {
this.messagesdata = data;
console.log(data);
if(data.active== true) {
this.activeMessages = this.messagesdata
}
},error => {});
}
Here's the output in the console: