Boostrap Navigation for Kendo Angular components

Question

In my existing projects I have angular components with using kendo style. Now I need to create the navigation as shown in below image

Currently "Home","Profile","Contact" are different components and are working based on the routing.

How can I use the Bootstrap Navigation to achieve the above design re-using the components

    <nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>


  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

PS: I'm trying to create a shared component for navigation and re-use it.

EDIT: To render the angular component of click of navigation button in the line

<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>

Answer 1

Add a selector attribute to your component, then use the selector in the tab-pane. For example:

import { ... } from '...';
@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html'
})
export class MyComponent {
    // ...
}

<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    <my-component></my-component>
</div>