Here is working code! Check in your application.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">tab 1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">tab 2</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">tab 3</div>
</div>
I’m making a multi-page form in Angular using nav-tabs and tab-content. I can switch between tabs, but content is not shown in any of the tabs. Before I added the fade to the tab-panes, the content of step 1 was shown in every step, so the fade might be one of the problems, but not the only one I think… Below is my code, any help is appreciated!
I got the html from this site: https://getbootstrap.com/docs/4.4/components/navs/#tabs
It would be amazing if it were possible to do these tabs and the links to them all in the same url (so not changing it), so if anyone knows how to do that (if it is possible), then you’re amazing!
<nav>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="step1" data-toggle="tab" href="infotemplate/#step1" role="tab" aria-controls="step1" aria-selected="true">Step 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="step2" data-toggle="tab" href="infotemplate/#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2</a>
</li>
</ul>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" role="tabpanel" id="step1" aria-labelledby="step1">
<form [formGroup]="basicsform">
<div>
<div class="required-field">Full name:</div>
<input type="text" formControlName="name" placeholder="Full name">
</div>
<div>
Label:
<input type="text" formControlName="label" placeholder="Label">
</div>
<div>
<div class="required-field">E-mail:</div>
<input type="email" formControlName="email" placeholder="E-mail">
</div>
<div>
URL to picture:
<input type="url" formControlName="picture" placeholder="Picture URL">
</div>
<div>
<div class="required-field">Phone number:</div>
<input type="text" formControlName="phone" placeholder="Phone number">
</div>
<div>
URL to website:
<input type="url" formControlName="website" placeholder="Website URL">
</div>
<div>
Summary:
<input type="text" formControlName="summary" placeholder="Summary">
</div>
<div formGroupName="location">
<h6>Location</h6>
<div>
<div class="required-field">Address:</div>
<input type="text" formControlName="address" placeholder="Address">
</div>
<div>
<div class="required-field">City:</div>
<input type="text" formControlName="city" placeholder="City">
</div>
<div>
<div class="required-field">Postal Code:</div>
<input type="text" formControlName="postalCode" placeholder="Postal code">
</div>
<div>
<div class="required-field">Country code:</div>
<input type="text" formControlName="countryCode" placeholder="Country code">
</div>
<div>
Region:
<input type="text" formControlName="region" placeholder="Region">
</div>
</div>
</form>
</div>
<div class="tab-pane fade" role="tabpanel" id="step2" aria-labelledby="step2">
<form [formGroup]="basicsform">
<div formArrayName="profiles" *ngFor="let profile of basicsform.get('profiles').controls; let i = index;">
<div [formGroupName]="i">
<em><b>Profile {{i + 1}}:</b></em>
<div class="required-field">Network:</div>
<input type="text" formControlName="network" placeholder="Network">
<div class="required-field">Username:</div>
<input type="text" formControlName="username" placeholder="Username">
<div class="required-field">URL:</div>
<input type="text" formControlName="url" placeholder="URL"><br>
<button (click)="deleteProfile(i)">Delete Profile {{i+1}}</button><br>
</div><br><br>
</div><br>
<div><button (click)="addProfile()" [disabled]="basicsform.get('profiles').invalid">Add
profile</button></div><br>
</form>
</div>
that’s the strange thing, I have directly copied this code and it still doesn’t work…
I found another solution which completely fits my needs, but thanks for the trouble anyway! For those curious: I used this:
