Mdb tab for ngfor MDB5

Topic: Mdb tab for ngfor MDB5

klepva priority asked 3 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

Add comment

Arkadiusz Idzikowski staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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 3 years ago

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

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

HTML .ts .ts view here is the screenshot

Please insert min. 15 characters.

klepva priority commented 3 years ago

I attached my screenshot bellow

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

Add comment

Write

Create snippet

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

klepva

55Support score
12Questions 1Answers 0Snippets