Topic: Mdb tab for ngfor MDB5

klepva priority asked 2 years 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

Arkadiusz Idzikowski staff answered 2 years ago

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(() => {

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(() => {
      }, 0);

klepva priority commented 2 years ago

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

Arkadiusz Idzikowski staff commented 2 years 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 2 years ago

HTML .ts .ts view here is the screenshot

klepva priority commented 2 years ago

I attached my screenshot bellow

Arkadiusz Idzikowski staff commented 2 years 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.


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



Specification of the issue

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