HorizontalTabs.ts

// ts 
import { Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'horizontal-tabs',
  templateUrl: 'horizontal-tabs.html'
})
export class HorizontalTabs {
  @Input() componentId: string;
  @Input() tabMenu: any
  @Output() tabClickEvent = new EventEmitter();

  constructor() {
  }

  tabClick(index){
    this.tabClickEvent.emit({index: index});
  }

}

// html
<div id="{{componentId}}" class="wrap-list">
    <ul class="tab-list">
        <li *ngFor="let title of tabMenu.titles; let i = index" class="g-small" [ngClass]="{'active': tabMenu.activeIndex === i}" (click)="tabClick(i)">{{title}}</li>
    </ul>
</div>

// css

horizontal-tabs {
    .wrap-list {
        min-height: 40px;
        height: 100%;
    }
    .tab-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            border-right: 1px solid #FFF;
            width: 100%;
            background: #9B9FAD;
            text-transform: uppercase;
            font-family: 'Century Gothic Bold';
            min-height: 36px;
            color: #FFF;
            text-align: center;
            line-height: 6vh;
            height: 6vh;
        }
        li:last-child {
            border: none;
        }
        li.active {
            background-color: #575A67;
        }
    }
}