All Components

Configuration

The TabStrip enables you to build configuration components by using the Angular structural directives.

The following example demonstrates how to use the ngFor directive.

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip [ngStyle]="{'width': '400px'}">
        <kendo-tabstrip-tab
          *ngFor="let item of items let i=index"
          [title]="item.city"
          [selected]="i == selected"
          [disabled]="item.disabled"
        >
            <ng-template kendoTabContent>
              <div class="weather">
                <h4>{{item.temp}}<span>&ordm;C</span></h4>
                <p>Weather in {{item.city}} is {{item.weather}}.</p>
              </div>
            </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        .weather {
            margin: 30px;
            text-align: center;
        }
    `]
})

export class AppComponent {
  public selected: number = 1;
  public items: any = [{
            disabled: true,
            city: "Paris",
            temp: 17,
            weather: "rainy"
      }, {
            disabled: false,
            city: "New York",
            temp: 29,
            weather: "sunny"
      }, {
            disabled: false,
            city: "Sofia",
            temp: 23,
            weather: "cloudy"
      }, {
            disabled: false,
            city: "London",
            temp: 19,
            weather: "cloudy"
      }]
}
In this article