7
  • I am trying to display the jquery tabs in angular way.
  • so I created a method tabsUL() where I am trying to display the value in the alert but I am not getting it,
  • after that I am not not sure how to proceed.
  • providing my jquery codepen below
  • providing plnkr also below which is not working

  • can you guys tell me how to proceed

    working fiddle https://codepen.io/texirv/pen/Vzdqpo

    not working fiddle http://plnkr.co/edit/XMLRIGEJLnxK3Vv9Y8Ma?p=preview

  export class App {
    constructor() {
      this.name = 'Angular2'
    }

    tabsUL(): void {
      //console.log("I am here");
      //alert("I am here");
      var tab_id = $(this).attr('data-tab');
      alert("tab_id------>" + tab_id);
    }
  }
Improve this question
1
  • I think you should try ngx-bootstrap tabs Commented Sep 8, 2017 at 13:51

4 Answers 4

Reset to default
3

Easiest way I have found is through this post and it works fine and is in angular way and easily extendable :

tab.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'tab',
  styles: [`
    .pane{
      padding: 1em;
    }
  `],
  template: `
    <div [hidden]="!active" class="pane">
      <ng-content></ng-content>
    </div>
  `
})
export class TabComponent {
  @Input('tabTitle') title: string;
  @Input() active = false;
}

tabs.component.ts

  import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
  selector: 'tabs',
  template:`
    <ul class="nav nav-pills nav-fill">
      <li class="nav-item" *ngFor="let tab of tabs" (click)="selectTab(tab)">
        <a class="nav-link" tabindex [class.active]="tab.active">{{tab.title}}</a>
      </li>
    </ul>
    <ng-content></ng-content>
  `
})
export class TabsComponent implements AfterContentInit {

  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

  // contentChildren are set
  ngAfterContentInit() {
    // get all active tabs
    let activeTabs = this.tabs.filter((tab)=>tab.active);

    // if there is no active tab set, activate the first
    if(activeTabs.length === 0) {
      this.selectTab(this.tabs.first);
    }
  }

  selectTab(tab: TabComponent){
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);

    // activate the tab the user has clicked on.
    tab.active = true;
  }

}

your.component.html

<tabs #tabs>
  <tab  #foo tabTitle="foo">
tab foo content
</tab>
<tab #bar tabTitle="bar">
tab bar content
</tab>
</tabs>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, this is what I wanted.
3

I use tabs for editing data like this:

enter image description here

Is that the kind of tabs you are looking for? (In the plunker they were just list items?)

If so, I achieved this using routing. Each tab is a separate component with a separate template. Then I route between them when the user clicks on the tabs.

Here the HTML that displays the tabs and includes the router outlet for routing.

<div class="panel-body">
    <div class="wizard">
        <a [routerLink]="['info']" routerLinkActive="active">
            Basic Information  <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
                                                  !isValid('info')}"></span>
        </a>
        <a [routerLink]="['tags']" routerLinkActive="active">
            Search Tags  <span  [ngClass]="{'glyphicon glyphicon-exclamation-sign':
                                                  !isValid('tags')}"></span>
        </a>
    </div>

    <router-outlet></router-outlet>
</div>

You can find the complete example here: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.

Improve this answer

1 Comment

Are you familiar with routing? Routing is a significant architectural approach. Maybe you are looking for a more minimal solution?
3
+25

There are three ways you can achieve this.

1 - The easiest way to do this would be with using the bootstrap tabs: Bootstrap docs

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1" (click)="DoSomeActionForTab1()">tab1</a></li>
  <li><a data-toggle="tab" href="#tab2" (click)="DoSomeActionForTab2()">tab2</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <h3>Tab1</h3>
    <p>Some content.</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>Tab2</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>

1 - You could do this through named router outlets, which is slightly more advanced: Docs

html

<div class="panel-body">
    <div class="wizard">
        <a [routerLink]="[{ outlets: { tabs: ['tab1'] } }]" routerLinkActive="active">Tab1</a>
        <a [routerLink]="[{ outlets: { tabs: ['tab2'] } }]" routerLinkActive="active">Tab2</a>
    </div>
    <router-outlet name="tabs"></router-outlet>
</div>

Routing module

{
  path: 'tab1',
  component: Tab1Component,
  outlet: 'tabs'
},
{
  path: 'tab2',
  component: Tab2Component,
  outlet: 'tabs'
}

3 - There is also an npm package designed for tabs: npm package

Improve this answer

Comments

2

I have created a simple, semantic, working version for you here:

http://plnkr.co/edit/xIj0z7Xl7cI3nEF0yIJM?p=preview

The main issues with your code were that you were not passing $event when clicking on a tab and you had no css to display the HTML as tabs

For more information on using $event object in angular2 see https://angular.io/guide/user-input#get-user-input-from-the-event-object

Update: Here is a similar solution with a programmatic approach to changing the active tab http://plnkr.co/edit/wflXtbu8d7vvU4puH8hc?p=preview

Improve this answer

6 Comments

can you tell me what is the use of $event, I have seen at so many places they are passing $event and why we should pass $event...it would be great if you explain so that in the future it will be helpful??
$event passes the event object (w3schools.com/jsref/dom_obj_event.asp) into your code. You can get access to the target element which triggered the event, in this case a tab link
@itodd hey but I thought by using getDocumentById I can get the particular id, then why we are using $event to target the element
@texirv $event is used to know which tab the user has clicked on - read the code and look at tab_id = event.target.hash.replace('#', '');
@itodd there your using $sign before event and here you are using without $ symbol in the line event.target.hash....can you explain ...thanks
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.