Toggle overview
NbToggleComponent
Toggle is a control representing on and off states.
123456789101112131415
import { Component } from '@angular/core';
@Component({
selector: 'nb-toggle-showcase',
template: `
<nb-card>
<nb-card-body>
<nb-toggle></nb-toggle>
</nb-card-body>
</nb-card>
`,
})
export class ToggleShowcaseComponent {
}
Installation
Import NbToggleComponent to your feature module.
@NgModule({
imports: [
// ...
NbToggleModule,
],
})
export class PageModule { }
Usage
Toggle may have one of the following statuses: basic, primary, success, warning, danger, info, control
12345678910111213141516171819202122232425262728
import { Component } from '@angular/core';
@Component({
selector: 'nb-toggle-status',
template: `
<nb-card>
<nb-card-body class="example-items-rows">
<nb-toggle status="basic">Basic</nb-toggle>
<nb-toggle status="primary">Primary</nb-toggle>
<nb-toggle status="success">Success</nb-toggle>
<nb-toggle status="info">Info</nb-toggle>
<nb-toggle status="warning">Warning</nb-toggle>
<nb-toggle status="danger">Danger</nb-toggle>
<div class="control-status-example">
<nb-toggle status="control">Control</nb-toggle>
</div>
</nb-card-body>
</nb-card>
`,
styles: [`
.example-items-rows {
align-items: center;
}
`],
})
export class ToggleStatusComponent {
}
Toggle can be disabled via disabled input.
12345678910111213141516
import { Component } from '@angular/core';
@Component({
selector: 'nb-toggle-disabled',
template: `
<nb-card>
<nb-card-body class="example-items-col">
<nb-toggle disabled></nb-toggle>
<nb-toggle [checked]="true" disabled></nb-toggle>
</nb-card-body>
</nb-card>
`,
})
export class ToggleDisabledComponent {
}
Toggle may have a label with following positions: left, right, start, end (default)
12345678910111213141516171819
import { Component } from '@angular/core';
@Component({
selector: 'nb-toggle-label-position',
template: `
<nb-card>
<nb-card-body class="example-items-col">
<nb-toggle labelPosition="start">Label Start</nb-toggle>
<nb-toggle labelPosition="end">Label End</nb-toggle>
<nb-toggle labelPosition="right">Label Right</nb-toggle>
<nb-toggle labelPosition="left">Label Left</nb-toggle>
<nb-toggle disabled>Label Default Disabled</nb-toggle>
</nb-card-body>
</nb-card>
`,
})
export class ToggleLabelPositionComponent {
}
You can set control state via checked binding:
<nb-toggle [(checked)]="checked"></nb-toggle>
Or it could be set via reactive forms or ngModel bindings:
12345678910111213141516171819202122
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'nb-toggle-form',
template: `
<nb-card>
<nb-card-body class="example-items-col">
<nb-toggle [(ngModel)]="toggleNgModel">Toggle with NgModel</nb-toggle>
<nb-toggle [formControl]="toggleFormControl">Toggle with FormControl</nb-toggle>
</nb-card-body>
</nb-card>
`,
})
export class ToggleFormComponent {
toggleNgModel = true;
toggleFormControl = new FormControl();
}
Previous page
Radio
Next page
Need some help or found an issue?
Ask on Stack Overflow with tag `nebular` or post an issue on GitHub.