File

src/lib/kiewit-tabstrip/kiewit-tabstrip.component.ts

Implements

OnInit

Metadata

moduleId module.id
selector kiewit-tabstrip
styleUrls kiewit-tabstrip.component.scss
templateUrl ./kiewit-tabstrip.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

config

Outputs

kcsTabStripClick $event type: EventEmitter<any>

Methods

kiewitTabStripClicked
kiewitTabStripClicked(tabData: )
Parameters :
Name Type Optional Description
tabData
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

_sliderTabToAnimate
_sliderTabToAnimate: ElementRef
Type : ElementRef
Decorators : ViewChild
_ul
_ul: ElementRef
Type : ElementRef
Decorators : ViewChild
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'kiewit-tabstrip',
    templateUrl: './kiewit-tabstrip.component.html',
    styleUrls: ['./kiewit-tabstrip.component.scss']
})
export class KiewitTabStripComponent implements OnInit {

    @ViewChild('slidertab') _sliderTabToAnimate: ElementRef;
    @ViewChild('ul') _ul: ElementRef;

    @Input() config = {
        data: []
    };

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

    ngOnInit() {
        this._sliderTabToAnimate.nativeElement.style.marginLeft = this.config.data[0].SliderLeftMargin + 'px';
        this._sliderTabToAnimate.nativeElement.style.width = this.config.data[0].SliderWidth + 'px';
    }

    kiewitTabStripClicked(tabData) {
        this._sliderTabToAnimate.nativeElement.style.marginLeft = tabData.SliderLeftMargin + 'px';
        this._sliderTabToAnimate.nativeElement.style.width = tabData.SliderWidth + 'px';
        this.kcsTabStripClick.emit(tabData);
    }
}


<kendo-tabstrip style="height: 40px; display: table-cell; vertical-align: middle; text-align: center;">
  <div #ul *ngIf='config.data && config.data.length' >
    <div *ngFor="let tab of config.data; let id = index">
      <kendo-tabstrip-tab #kendotab [selected]=tab.Selected>
        <ng-template kendoTabTitle>
          <span class="kiewitTabTitle" (click)="kiewitTabStripClicked(tab)"> {{tab.Title}} </span>
        </ng-template>
      </kendo-tabstrip-tab>      
    </div>   
  </div>  
</kendo-tabstrip>
<div #slidertab style="max-width:264px; height: 3px; position:absolute; background: #FFD200; transition: 1s; margin-top: -10px"></div>

Implementation
In Type Script File

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'kiewit-tabstrip',
    templateUrl: './kiewit-tabstrip.component.html',
    styleUrls: ['./kiewit-tabstrip.component.scss']
})
export class KiewitTabStripComponent implements OnInit {
public data: any[] = [{
        'Id': 1,
        'Title': 'Opportunities',
        'SliderWidth': 180,
        'SliderLeftMargin': 0,
        'Selected': true
    },
    {
        'Id': 2,
        'Title': 'Pending/New Work "Plugs"',
        'SliderWidth': 180,
        'SliderLeftMargin': 180 * 1,
        'Selected': false
    },
    {
        'Id': 3,
        'Title': 'ORS Project tags & Financial Plans',
        'SliderWidth': 180,
        'SliderLeftMargin': 180 * 2,
        'Selected': false
    }];

    public tabstripConfig: any = {
        'data': this.data
    };
kiewitTabStripClicked(tabData) {
        //alert(tabData.Title);
    }
}
           
In HTML File

<kiewit-tabstrip [config]="tabstripConfig" (kcsTabStripClick)="kiewitTabStripClicked($event)">
</kiewit-tabstrip>
    
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""