ng2-bootstrap link static tabset to component

114 views Asked by At

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?

0

There are 0 answers