angular-x-tabs v1.0.3

DEMO

View on stackblitz

Install

npm install angular-x-tabs

Usage

import { TabsModule } from 'angular-4-tabs';

//...

@NgModule({
  imports:      [
      BrowserModule,
      FormsModule,
      TabsModule // <---- HERE
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Example

HTML

<h1>Vertical</h1>
<ngx-tabs actionLabel="create" class="vertical">
	<ngx-panel *ngFor="let d of data" [title]="d.title" [unsaved]="d.unsaved">
		<p>{{ d.content }}</p>
	</ngx-panel>
</ngx-tabs>

> TS
```ts
    public data = [
    {
      title: Math.random(),
      content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      unsaved: false
    },
    {
      title: Math.random().toFixed(3),
      content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      unsaved: false
    },
    {
      title: Math.random().toFixed(3),
      content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      unsaved: false
    }
  ];

  public addData() {
    this.data.push({
      title: 'new item',
      content: 'content',
      unsaved: true
    });
  }

  public saveData() {
    alert('Saved !');
  }

API

ACTION

TABS

PANEL

• title : Text used for the tab title
• unsaved : Boolean used to show a star after the title