Implementing tabs using angular 2

Question

• I am trying to display jquery tabs in an angular way.
• so I created the tabsUL () method, where I try to display the value in a warning, but I do not get it,
• after that I’m not sure how to proceed.
• providing jquery codepen below
• giving plnkr is also lower which doesn't work

• Can you guys tell me how to act

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

  the violin does not work 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); } } 

Answer 1

The easiest way I've found is this post , and it works great and is in angular and extends easily:

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> 

Answer 2

I use tabs to edit data as follows:

Are these the tabs you are looking for? (In the plunkers, were they just list items?)

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

Here is the HTML that displays the tabs and includes the output of the router 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> 

Here you can find the full example: https://github.com/DeborahK/Angular-Routing in the APM-Final folder.

Answer 3

There are three ways to achieve this.

1 - The easiest way to do this is to use the boot 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 can do this through named routers, which are slightly more advanced: Documents

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 for tabs: an npm package

Answer 4

I created for you a simple semantic working version:

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

The main problems with your code were that you did not go through $event when you clicked on a tab, and you did not have CSS to render HTML as tabs

For more information on using the $ 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