Hi Brian,
You need to move the template INTO the kendo-tabstrip element. Something
like this:
<kendo-tabstrip style="flex:1 1 auto;min-height: 40px;" #ribbon>
<ng-template #view>
<kendo-tabstrip-tab [title]="'View'" [selected]="true">
<ng-template kendoTabContent>
<p>ribbon works!</p>
<button (click)='onUpdate()'>Update</button>
</ng-template>
</kendo-tabstrip-tab>
</ng-template>
<ng-template #product>
<kendo-tabstrip-tab [title]="'Product'" [selected]="false">
<ng-template kendoTabContent>
<p>ribbon works!</p>
<button (click)='onUpdate()'>Update</button>
</ng-template>
</kendo-tabstrip-tab>
</ng-template>
</kendo-tabstrip>
Though I am confused by our use of ng-template. ng-template does not render
itself. It is referenced elsewhere, like in an *ngIf binding.
More likely, you want to do something more dynamic:
<kendo-tabstrip style="flex:1 1 auto;min-height: 40px;" #ribbon>
<kendo-tabstrip-tab *ngFor="let tab of tabs" [title]="tab.title"
[selected]="tab.selected">
...
</kendo-tabstrip-tab>
</kendo-tabstrip>
Where "tabs" is an array of data on the component itself. This template
would output a kendo-tabstrip-tab element for each element in the array.
Hope that helps.
On Fri, Mar 23, 2018 at 5:23 PM Brian Wilkinson <[email protected]> wrote:
> I have the following view template
>
> <kendo-tabstrip style="flex:1 1 auto;min-height: 40px;" #ribbon>
>
> </kendo-tabstrip>
>
> <ng-template #view>
> <kendo-tabstrip-tab [title]="'View'" [selected]="true">
> <ng-template kendoTabContent>
> <p>ribbon works!</p>
> <button (click)='onUpdate()'>Update</button>
> </ng-template>
> </kendo-tabstrip-tab>
> </ng-template>
>
> <ng-template #product>
> <kendo-tabstrip-tab [title]="'Product'" [selected]="false">
> <ng-template kendoTabContent>
> <p>ribbon works!</p>
> <button (click)='onUpdate()'>Update</button>
> </ng-template>
> </kendo-tabstrip-tab>
> </ng-template>
>
> The idea is I want to be able to load the kendo-tabstrip-tab strips
> dynamically, but they will be come from templates as above. How can I add
> them in my code component so the result is like below.
>
> <kendo-tabstrip style="flex:1 1 auto;min-height: 40px;" #ribbon>
> <kendo-tabstrip-tab [title]="'View'" [selected]="true">
> <ng-template kendoTabContent>
> <p>ribbon works!</p>
> <button (click)='onUpdate()'>Update</button>
> </ng-template>
> </kendo-tabstrip-tab>
> <kendo-tabstrip-tab [title]="'Product'" [selected]="false">
> <ng-template kendoTabContent>
> <p>ribbon works!</p>
> <button (click)='onUpdate()'>Update</button>
> </ng-template>
> </kendo-tabstrip-tab>
> </kendo-tabstrip>
>
> I have tried several methods but he best I get is them appearing under
> like below
> <kendo-tabstrip style="flex:1 1 auto;min-height: 40px;" #ribbon>
> </kendo-tabstrip>
> <kendo-tabstrip-tab [title]="'View'" [selected]="true">...
> </kendo-tabstrip-tab>
> <kendo-tabstrip-tab [title]="'Product'" [selected]="false">...
> </kendo-tabstrip-tab>
>
> Any help would be greatfull recieved, I'm just starting my angular journey.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
Lucas Lacroix
Computer Scientist
Advanced Technology Division, MEDITECH <http://ehr.meditech.com/>
781-774-2293
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
