Topic: Mdb tab for ngfor MDB5

klepva priority asked 1 year ago


Hi, I am trying to set active mdb-tab, but couldnt find a way to do it. There is setActiveTab() on the api but seem like it only work with regular mdb-tab. I am trying to set active mdb-tab with ngfor. Is there a way to do it?

Resources (screenshots, code snippets etc.)enter image description here



It looks like in this case the tabs are not initialized yet when you try to change the active tab. Please try to use this code, we will check if we can somehow fix that on our end.

@ViewChild('tabs') tabs: MdbTabsComponent;

  ngAfterViewInit(): void {
    Promise.resolve().then(() => {
      this.tabs.setActiveTab(2);
    });
  }

Other example for async data (tabList array is then used in ngFor):

  @ViewChild('tabs') tabs: MdbTabsComponent;

  constructor(private http: HttpClient) {}

  tabsList: any[] = [];

  ngOnInit(): void {
    this.http.get(apiUrl).subscribe((data: any[]) => {
      this.tabsList = data;

      setTimeout(() => {
        this.tabs.setActiveTab(1);
      }, 0);
    })
  }

klepva priority commented 1 year ago

I tried, but still not works :(. I think i will wait for the next update then


Arkadiusz Idzikowski staff commented 1 year ago

@klepva Can you provide full HTML/TS example code and a more detailed description of the problem? I double-checked that and didn't find any problems with setActiveTab method.


klepva priority commented 1 year ago

HTML .ts .ts view here is the screenshot


klepva priority commented 1 year ago

I attached my screenshot bellow


Arkadiusz Idzikowski staff commented 1 year ago

@klepva Thank you. I reproduced your example on our end and it looks like there is a problem with active tab initialization when async data is used in ngFor. Using setTimeout to delay setActiveTab method call should resolve the problem in this case. I edited my answer and added a second example for async data.



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0
  • Device: PC
  • Browser: any
  • OS: Window
  • Provided sample code: No
  • Provided link: No