unicorn-components/src/components/containers/tabs/item/item.component.ts

<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>

import { Component, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output } from '@angular/core';

import { UniOption } from '../../../../models/option';

@Component({
    selector: 'uni-tabs-item',
    template: '',
})
export class UniTabsItemComponent {

    @HostBinding('class.uni-tabs-item') componentClass = true;
    @Input() size: 'small';

    @Input()
    @HostBinding('class.uni-tabs-item--selected')
    selected = false;

    @Input() label: string;
    @Input() value: any;

    @Output() select = new EventEmitter<void>();

    @HostBinding('class.uni-tabs-item--small') get isSmall(): boolean { return this.size === 'small'; }
    @HostBinding('innerHtml') get tabLabel(): string { return this.label; }
    @HostListener('click') onClick() { this.select.emit(this.value); }

    constructor() { }

}