Topic: Get Mdb Tabs Title in Angular
*Expected behavior*I have a used mdb-tabs in my angular project. where i have tablist which gets loop using ngfor and all the tab names gets shown on ui. i have used (activeTabChange)="onTabChange($event)" inside tag. I have tried to console tab change event. where i want to get tab name inside onTabChange(event: MdbTabChange) { console.log(event); console.log(event['tab']['title']); } this method.
Actual behavior But i am getting undefined for console log.
Resources (screenshots, code snippets etc.) component.ts
public tabsList: any[ ] = [{ key: 'eps', title: 'EPS' }, { key: 'asset', title: 'Asset' }, { key: 'alert', title: 'Alert' }, { key: 'threat feed', title: 'Threat Feed' }, { key: 'soar', title: 'SOAR' }];
onTabChange(event: MdbTabChange) { console.log(event['tab']['title']); }
component.html
<mdb-tabs class="custome-tab-01" #tabs (activeTabChange)="onTabChange($event)">
<mdb-tab *ngFor="let tab of tabsList;">
<ng-template mdbTabTitle><span><i class="fas fa-cube"></i>{{tab.title}}</span></ng-template>
</mdb-tab>
</mdb-tabs>
@prashant_harde You are trying to access the tab title input property which is not defined because you create a custom title template using ng-template. In this case, the component takes the span defined inside the ng-template and renders it as a tab title. It would be easier to take the index number returned by the event and find a specific tab title in your tabList array.
onTabChange(event: MdbTabChange) {
console.log(this.tabList[event.index].title);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 2.1.0
- Device: Laptop
- Browser: chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No