Quiero crear una tira de pestañas y agregar una pestaña dentro cuando hago clic en el menú de la izquierda. Creé todos mis componentes y uso estos componentes como contenido de pestañas dinámicas.
¿Es posible con kendo Angular Tabstrip Layout?
Gracias
Puede usar el ngFor incorporado para hacer que la plantilla del componente se repita sobre una variable de colección definida en el componente para mostrar dinámicamente las pestañas.
Echale un vistazo a éste ejemplo. Si tuviera que agregar o eliminar de la variable de tabs , se reflejará dinámicamente en el DOM.
Plantilla del componente:
<kendo-tabstrip> <kendo-tabstrip-tab *ngFor="let tab of tabs; let first = first" [title]="tab.header" [selected]="first"> <ng-template kendoTabContent> <div class="content"> <img [src]="tab.body.image" /> <h2>{{ tab.body.degrees }}<span>ºC</span></h2> <span>{{ tab.body.description }}</span> </div> </ng-template> </kendo-tabstrip-tab> </kendo-tabstrip>Variable Declarada en Componente:
tabs = [ { header: 'Paris', body: { image: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png', degrees: '17', description: 'Rainy weather in Paris.', }, }, { header: 'New York City', body: { image: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/cloudy.png', degrees: '19', description: 'Cloudy weather in New York City.', }, }, { header: 'Tallinn', body: { image: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/sunny.png', degrees: '23', description: 'Sunny weather in Tallinn.', }, }, { header: 'London', body: { image: 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png', degrees: '16', description: 'Rainy weather in London.', }, }, ];Stackblitz: https://stackblitz.com/edit/angular-iwwkxv