CODEWITHSUNDEEP
angularangular-routingngx-bootstrap
Sebin Simon
Sebin Simon

Reputation: 1646

Router Navigate to ngx-bootstrap tabs Angular 4

I have a component with four tabs (using ngx-bootstrap tabs) myprod,mysettings,etc. and I created four different routing for each tab(pointed to same component). and I used the below code for show the right tab on page load.

[routerLink]="['/user/my-account']" [routerLinkActive]="'active is-active'"

but unfortunately everytime the active class will add to the first to tab not the right one. If I use any other class name instead of active it works as I expected, please help.

enter image description here

enter image description here

Upvotes: 3

Views: 4722

Answers (3)

WasiF
WasiF

Reputation: 28879

This is how you can do tab changes with routing programmatically

component.html

<tabset>
    <tab *ngFor="let m of menu; let i = index" [active]="m.active" [heading]="m.title" (selectTab)="tabSelected(m.url)">
        <component-a *ngIf="i == 0"></component-a>
        <component-b *ngIf="i == 1"></component-b>
        <component-c *ngIf="i == 2"></component-c>
    </tab>
</tabset>

component.ts

  menu: Array<IMenu>
  constructor(private router: Router) { }

  ngOnInit(): void {
    this.initMenu()
    this.onPageLoad()
  }

  initMenu() {
    this.menu = [
      {
        title: 'Tab 1',
        url: '/tab-1',
        active: true   // default active tab
      },
      {
        title: 'Tab 2',
        url: '/tab-2',
        active: false
      },
      {
        title: 'Tab 3',
        url: '/tab-3',
        active: false
      }
    ]
  }

  // activate tab based on url when page loads
  onPageLoad() {
    this.menu.forEach(m => m.active = false)
    let _selected_menu = this.menu?.find(x => x.url.includes(this.router.url))

    if (_selected_menu) {
      _selected_menu.active = true
    }
  }

  // change url when user selects tab
  tabSelected(url: string) {
    this.router.navigateByUrl(url)
  }

Upvotes: 0

Gon&#231;alo Alves
Gon&#231;alo Alves

Reputation: 46

Kind of late reply, but for future people searching:

HTML:

  <tabset class="nav nav-tabs">
    <ng-container *ngFor="let template of templates">
      <tab #tab="routerLinkActive" 
           (selectTab)="(!template.disabled || firstSelection) && routeChange(template.appRouterLink)"
           [active]="tab.isActive" 
           [customClass]="template.disabled && template.hideDisabled ?
            'd-none' : template.disabled ? 'disabled' : ''" 
           [heading]="template.labelKey | translate"
           [routerLink]="template.appRouterLink" 
           routerLinkActive="active">
      </tab>
    </ng-container>
  </tabset>

  <div class="tab-content">
    <div class="tab-pane active">
      <router-outlet></router-outlet>
    </div>
  </div>

TS:

  @ContentChildren(TabsDirective) public templates: QueryList<TabsDirective>;
  private firstSelection = true;

  public constructor(private router: Router, private route: ActivatedRoute) {
  }

  public async routeChange(appRouterLink: any[] | string): Promise<any> {
    if (this.firstSelection) {
      this.firstSelection = false;

    } else {
      const route = appRouterLink instanceof Array ? appRouterLink : [appRouterLink];
      this.router.navigate(route, {relativeTo: this.route});
    }
  }

And the directive:

@Directive({selector: '[appTabs]'})
export class TabsDirective {
  @Input() public disabled: boolean;
  @Input() public hideDisabled: boolean;
  @Input() public labelKey: string;
  @Input() public appRouterLink: any[] | string | null | undefined;
}

Usage example:

 <app-nav>
   <ng-template [disabled]="!can_see_info" appRouterLink="info"
             appTabs labelKey="INFO"></ng-template>

   <ng-template [disabled]="!can_see_events || !company?.id" appRouterLink="events"
             appTabs labelKey="EVENTS"></ng-template>
 </app-nav>

Few notes on why the code is like this:

  • If you use the disabled property on tab tag and the initial value is set to true but is later changed, it will dismiss the trigger of select event, which will make the tab not show as selected.
  • If you use *ngIf on tab tag, the order of the tabs might get all screwed up if you hide one and later show it again (sort of a FIFO behaviour).

Upvotes: 0

Fateh Mohamed
Fateh Mohamed

Reputation: 21367

try this 

 <tab   
  [routerLink]="['/user/my-account']"
  routerLinkActive 
  #ads="routerLinkActive"
  [active]="ads.isActive">  
</tab>

Upvotes: 1

Related Questions