Angular 7 Tabs in component

Question

Need to create a component having say - 2 tabs on click of each tab need to redirect to specific component.

for ex - say i have two tabs on a single page - Tab 1, Tab 2 on click of Tab 1 need to see Component_1 on click of Tab 2 need to see Component_2

To be clear UI something like- https://material.angular.io/components/tabs/api

but any way without using Angular material Tabs

Answer 1

Maintain a 'Tabs' array variable with property 'type' for each Object. eg: Tabs: any[] = [ {name:'Tab1', type:'tab1'} , {name:'Tab2', type:'tab2'}]; Based on the 'type' property, load/Switch particular Tab's component in HTML. eg:

<div *ngFor='let tab of Tabs' [ngSwitch]="tab.type">
     <tab1-comp *ngSwitchCase="'tab1'"></tab1-component>
     <tab2-comp *ngSwitchCase="'tab2'"></tab2-component>
</div>

Answer 2

You can use ngx-bootstrap for that.

module.ts

import { CollapseModule, BsDropdownModule, AccordionModule, TabsModule, BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({
 imports: [
    CommonModule,
    ...
    TabsModule.forRoot(),
    AccordionModule.forRoot(),
    CollapseModule.forRoot(),
    BsDropdownModule.forRoot()
 ]
})

file.html

<div class="tabs-resp-custom">
  <ul class="nav nav-tabs">
    <li class="nav-item" >
    <a class="nav-link" [routerLink]="['tab1']" routerLinkActive="active">Tab 1</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" [routerLink]="['tab2']" routerLinkActive="active">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">
      <router-outlet></router-outlet>
    </div>
</div>

Answer 3

您可以为它创建一个标题组件并在应用程序组件上定义它，然后启动路由器导航并提供路由可能会帮助您

<header-component></header-component><router-outlet></router-outlet>

Answer 4

You need to load Component_1 and Component_2 dynamically. Dynamic means, that the components location in the application is not defined at build time. That means, that it is not used in any angular template. Instead, the component is instantiated and placed in the application at runtime. See here how to dynamically create components in Angular7