Angular nav-tabs not showing tab-content

Question

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>

Answer 1

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>