### File

`projects/commons/src/lib/elements/switch/components/switch.component.ts`

### Metadata

selector | `cmn-switch`
styleUrls | `./switch.component.scss`
templateUrl | `./switch.component.html`

### Index

###### Inputs
color id isChecked isDisabled isRounded isThin label name

### Inputs

color
Type : `Colors`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:14

id
Type : `string`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:12

isChecked
Type : `boolean`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:18

isDisabled
Type : `boolean`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:19

isRounded
Type : `boolean`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:17

isThin
Type : `boolean`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:16

label
Type : `string`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:15

name
Type : `string`
Defined in projects/commons/src/lib/elements/switch/components/switch.component.ts:13

    import { Component, Input } from '@angular/core';

    import { Colors } from '../../../shared/enums';

    @Component({
        selector: 'cmn-switch',
        templateUrl: './switch.component.html',
        styleUrls: [ './switch.component.scss' ],
    })

    export class SwitchComponent {
        @Input() public readonly id: string;
        @Input() public readonly name: string;
        @Input() public readonly color: Colors;
        @Input() public readonly label: string;
        @Input() public readonly isThin: boolean;
        @Input() public readonly isRounded: boolean;
        @Input() public readonly isChecked: boolean;
        @Input() public readonly isDisabled: boolean;
    }

    <input type="checkbox"
           class="switch {{ color }}"
           [class.is-thin]="isThin"
           [class.is-rounded]="isRounded"
           [id]="id"
           [name]="name"
           [checked]="isChecked"
           [disabled]="isDisabled">
    <label [for]="id">
        {{ label }}
    </label>

`./switch.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""