Dynamic MDB tab component content


Topic: Dynamic MDB tab component content

George Stamelos pro premium priority asked 4 years ago

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?


Arkadiusz Idzikowski staff answered 4 years ago

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.


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