CODEWITHSUNDEEP
angulartypescriptangular-ui-router
user11194948
user11194948

Reputation:

Angular 7 Tabs in component

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

Upvotes: 0

Views: 11416

Answers (4)

Sucharitha Suchi
Sucharitha Suchi

Reputation: 328

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>

Upvotes: 3

Ushma Joshi
Ushma Joshi

Reputation: 459

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>

Upvotes: 2

Chamila Maddumage
Chamila Maddumage

Reputation: 3866

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

Upvotes: 0

Er Abdul Meman
Er Abdul Meman

Reputation: 173

You can create a header component for it and define it on app component and after that start router navigation and give routing may it will help you out

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

Upvotes: 0

Related Questions