Topic: Dynamic MDB tab component content
https://mdbootstrap.com/docs/angular/components/tabs/#dynamic-tabs shows an example of a dynamic tab with string content.
How can we add a dynamic tab with component content?
For example, if we have created a custom component named "my-test-component", how can we add a dynamic tab with "my-test-component" as its content?
In this case it would be better to use *ngIf directive on the specific tab and set the ngIf condition to true when you want to display the tab.
<mdb-tab *ngIf="condition">...</mdb-tab>
Edit:
You can also change only the tab title and just add your component to the tab template inside ngFor.
<mdb-tab *ngFor="let tab of tabs" heading="{{ tab.title }}">
<your-component></your-component>
</mdb-tab>
If you need to display different component based on some condition, you can add the condition value to the object in TS file and use Angular ngSwitch directive to decide which component should be displayed.
George Stamelos pro premium priority commented 4 years ago
Thanks for your answer.
Our web apps require record editing to take place in separate tabs (each record is loaded in a form at its own tab) and the user can open several of them at the same time. It would be preferable not to preallocate tab instances to the tabset but, instead, create them as needed.
Is something like this supported in mdb tab control?
Arkadiusz Idzikowski staff commented 4 years ago
@George Stamelos I edited my answer and added another solution.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: PC
- Browser: Chrome
- OS: Any
- Provided sample code: No
- Provided link: Yes