File

src/comps/tabs/tab.ts

Metadata

inputs title:tabtitle,
active
selector tab
styles .pane { padding: 1em; background-color: white; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
template
<div [hidden]="!_active" class="pane">
    <ng-content></ng-content>
</div>

Outputs

activated $event type: EventEmitter<any>

Constructor

constructor(tabs: Tabs)

Properties

_active
_active: boolean
Default value : false
_show
_show: boolean
Default value : true
Static active
active: boolean
Static show
show: boolean
Static title
title: string
import {Component, Host, Output, EventEmitter} from '@angular/core';
import {Tabs} from '../tabs/tabs';

@Component({
    selector: 'tab',
    inputs: [
        'title:tabtitle',
        'active'
    ],
    styles: [`
        .pane {
            padding: 1em;
            background-color: white;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
        }
    `],
    template: `
        <div [hidden]="!_active" class="pane">
            <ng-content></ng-content>
        </div>
    `
})

/**
 Add this Tab as part of it's parents Tabs component
 use @Host to make sure we only look for a parent Tabs dependency injector
 and don't go any further to prevent lookup of wrong Tabs under misconfiguration
 **/
export class Tab {

    constructor(@Host() private tabs: Tabs) {
        tabs.addTab(this);
    }

    @Output()
    activated: EventEmitter<any> = new EventEmitter<any>();

    public title: string;
     _active = false;
     _show = true;

    public set active(value) {
        this._active = value || false;
        if (this._active)
            this.activated.emit(true);
    }

    public get active() {
        return this._active;
    }

    public set show(value) {
        this._show = value;
        if (value == false) {
            this._active = false
            this.tabs.checkActive();
        }
    }

    public get show() {
        return this._show;
    }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""