Angular 2 Tabs

Angular 2 Tabs are navigable windows, each window (called tab) contains content, and generally we categorize contents depending on the theme.

angular 2 tabs example
angular 2 tabs example

live example at the end of the article

try angular 2 tabs

The tab can contain HTML content (images, paragraphs, videos ….).

A tab is identified by its name (or title) so we can make it accessible.

build an Angular 2 Tabs
build an Angular 2 Tabs

 

Include bootstrap before we start (it’s easy : ) )

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css” rel=”stylesheet”>

main app code source:

 


/**

* Created by Tareq Boulakjar. from angulartypescript.com

*/

import {Component, ChangeDetectionStrategy} from 'angular2/core';

import {CORE_DIRECTIVES} from 'angular2/common';

import {Tab} from './tab.directive';

import {Tabset} from './tabset.component';

import {TabHeading} from './tab-heading.directive';



/*Angular 2 Tabs Example*/

@Component({

selector: 'my-app',

template: `

<div (click)="$event.preventDefault()">

<h5>Angular 2 Tabs Example</h5>

<hr />

<tabset>

<tab heading="Home">Home</tab>

<tab *ngFor="#aTab of angular2TabsExample"

[heading]="aTab.title"

[active]="aTab.active"

(select)="aTab.active = true"

(deselect)="aTab.active = false"

[disabled]="aTab.disabled"

[removable]="aTab.removable"

(removed)="removeThisTabHandler(aTab)">

{{aTab?.content}}

</tab>

<tab (select)="doOnTabSelect(this)">

<template tab-heading>

<i class="glyphicon glyphicon-check"></i> On Select Tab!

</template>

Do action on select a Tab

</tab>

</tabset>

<hr />

<p>

<button type="button" class="btn btn-primary btn-sm" (click)="angular2TabsExample[0].active = true">Select a Tab from the Array</button>

</p>


</div>


`,

directives: [Tab,Tabset,TabHeading,CORE_DIRECTIVES],

changeDetection: ChangeDetectionStrategy.OnPush,

})

export class Angular2Tabs {

//dynamic Tabs

public angular2TabsExample:Array<any> = [

{title: 'Angular Tab 1', content: 'Angular 2 Tabs are navigable windows, each window (called tab) contains content', disabled: false, removable: true},

{title: 'Angular Tab 2', content: 'generally we categorize contents depending on the theme', disabled: false, removable: true},

{title: 'Angular Tab (disabled) X', content: 'Angular 2 Tabs Content', disabled: true, removable: true}

];

//on select a tab do something

public doOnTabSelect(currentTab:any) {

console.log("doOnTabSelect"+currentTab);

};

//on remove Tab do something

public removeThisTabHandler(tab:any) {

console.log('Remove Tab handler'+tab);

};

}

 

Angular 2 Tabs component is very useful.

Our example uses typescript as programming language.

angular-2-ui-framework

all files from here : angular-2-tabs

Angular 2 tabs