Topic: Mdb tab for ngfor MDB5
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.)
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 pro premium 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 pro premium priority commented 3 years ago
here is the screenshot
klepva pro premium 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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