Topic: Get Mdb Tabs Title in Angular

prashant_harde free asked 2 years ago


*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>

Arkadiusz Idzikowski staff answered 2 years ago


@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);
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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