I have the below static tabset:
<tabset [justified]="true" type="pills">
<tab>
<template tabHeading>Product Edit</template >
<br />
<br />
<div>
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label">Name:</label>
<div class="col-md-10">
<input class="form-control" type="text" placeholder="Product name.." />
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label">Description:</label>
<div class="col-md-10">
<textarea class="form-control" cols="5" placeholder="Short description.."></textarea>
</div>
</div>
</fieldset>
</div>
</tab>
<tab>
<template tabHeading>More Details</template >
<br />
<br />
<div>
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label">Detailed Name</label>
<div class="col-md-10">
<input class="form-control" type="text" placeholder="Detailed name.." />
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label">Detailed Description</label>
<div class="col-md-10">
<textarea class="form-control" rows="5" placeholder="Max 255 characters..."></textarea>
</div>
</div>
</fieldset>
</div>
</tab>
</tabset>
I want to add back and next buttons to toggle between these tabs. For this, how to link static tabset to component so that I can set the active property.
I have more tabs in my application and content in each tab is complex enough to manage with dynamic tabs.
Is there any other way to do this?