td-tab-select
element generates a tab group component that behaves like a mat-select
.
value
input.td-tab-option
element generates a tab component to which a value can be binded to.
Import the [CovalentTabSelectModule] in your NgModule:
import { CovalentTabSelectModule } from '@covalent/core/tab-select'; @NgModule({ imports: [ CovalentTabSelectModule, ... ], ... }) export class MyModule {}
Example without forms:
<td-tab-select [(value)]="myValue"> <td-tab-option [value]="1">Label 1</td-tab-option> <td-tab-option [value]="2">Label 2</td-tab-option> <td-tab-option [value]="3">Label 3</td-tab-option> </td-tab-select>
Example with forms:
<td-tab-select [(ngModel)]="myValue"> <td-tab-option [value]="1">Label 1</td-tab-option> <td-tab-option [value]="2">Label 2</td-tab-option> <td-tab-option [value]="3">Label 3</td-tab-option> </td-tab-select>
Example with all inputs/outputs:
<td-tab-select [value]="myValue" [backgroundColor]="'primary'" [color]="'accent'" [disabled]="false" [disabledRipple]="false" [stretchTabs]="true" (valueChange)="myValue = $event"> <td-tab-option [value]="1" [disabled]="false">Label 1</td-tab-option> <td-tab-option [value]="2">Label 2</td-tab-option> <td-tab-option [value]="3" [disabled]="true">Label 3</td-tab-option> </td-tab-select>