angularkendo-uikendo-tabstripkendo-ui-angular2

How can we load component dynamically in kendo-tabstrip-tab?


In angular 1, we had achieved this using following code :

<div kendo-tab-strip k-content-urls="[
'/app/Partial/general.html', 
'/app/Partial/employee.html',
'/app/Partial/department.html',
'/app/Partial/report.html']" k-options="tabOptions">
        <!-- tab list -->
        <ul class="print-item">
            <li class="k-state-active" data-item="general">General</li>
            <li data-item="employee">Employee</li>
            <li data-item="department">Department</li> 
            <li data-item="report">Report</li>
        </ul>
    </div>

Can we implement the same in the kendo-UI-angular2? I didn't find anything in the documentation pertaining to this.


Solution

  • In Angular2 you should create new components and reference them by adding their tag as tabstrip content.

    <kendo-tabstrip>
            <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
                   <weather-paris></weather-paris>
            </kendo-tabstrip-tab>
            <kendo-tabstrip-tab [title]="'Book Tickets'">
                        <tickets-paris></tickets-paris>
            </kendo-tabstrip-tab>
        </kendo-tabstrip>
    

    Then you create a new component with their associated html template (or use a templateUrl property if you have an html template file). Example for weather-paris component:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'weather-paris',
      template: '<div>The weather in Paris is {{degrees}} degrees.</div>'
    })
    export class MyComponent {
      degrees: number;
      constructor() {
        this.degrees = 15;
      }
    }
    

    More info on components here