Skip to content

Commit 68ae329

Browse files
sonusindhusonusindhu
committed
feat: add toggle control example with HTML, SCSS, and TypeScript documentation
1 parent 9c81a3a commit 68ae329

File tree

7 files changed

+159
-3
lines changed

7 files changed

+159
-3
lines changed

‎src/app/examples/advanced/example10/example10.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="flex flex-wrap gap-2 items-center justify-start mt-4 mb-4">
33
<button mat-stroked-button color="primary" routerLink="/advanced">Go to List</button>
44
<button mat-stroked-button color="primary" [routerLink]="'/advanced/example9'">Prev</button>
5-
<button mat-stroked-button color="primary" disabled>Next</button>
5+
<button mat-stroked-button color="primary" [routerLink]="'/advanced/example11'">Next</button>
66
</div>
77

88
<mat-tab-group>

‎src/app/examples/advanced/example12/user-list/user-list.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="flex flex-wrap gap-2 items-center justify-start mt-4 mb-4">
44
<button mat-stroked-button color="primary" routerLink="/advanced">Go to List</button>
55
<button mat-stroked-button color="primary" [routerLink]="'/advanced/example11'">Prev</button>
6-
<button mat-stroked-button color="primary" disabled>Next</button>
6+
<button mat-stroked-button color="primary" [routerLink]="'/advanced/example13'">Next</button>
77
</div>
88

99
<mat-tab-group>

‎src/app/examples/advanced/example13/example13.component.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,17 @@ <h3 class="text-lg font-semibold mb-2">Basic Usage</h3>
5151
</mat-card>
5252
</div>
5353
</mat-tab>
54-
<mat-tab label="Code">
54+
<mat-tab label="TS">
5555
<markdown src="assets/examples/advanced/example13/example13.component.ts.md"></markdown>
56+
</mat-tab>
57+
<mat-tab label="Toggle Control">
5658
<markdown src="assets/examples/advanced/example13/toggle-control.component.ts.md"></markdown>
5759
</mat-tab>
60+
<mat-tab label="HTML">
61+
<markdown src="assets/examples/advanced/example13/example13.component.html.md"></markdown>
62+
</mat-tab>
63+
<mat-tab label="SCSS">
64+
<markdown src="assets/examples/advanced/example13/example13.component.scss.md"></markdown>
65+
</mat-tab>
5866
</mat-tab-group>
5967
</div>

‎src/assets/examples/advanced/example13/example13.component.html.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```html
2+
<div class="demo-section">
3+
<h3 class="text-lg font-semibold mb-2">Basic Usage</h3>
4+
<mat-card class="p-4 bg-white rounded-lg shadow">
5+
<mat-card-content>
6+
<div class="controls flex flex-col gap-6">
7+
<div class="border-b pb-4 mb-4">
8+
<p class="font-medium mb-2">Reactive Form</p>
9+
<form [formGroup]="toggleControl" class="flex items-center gap-4">
10+
<div>
11+
<label for="toggle" class="mr-2 font-semibold">Toggle:</label>
12+
<app-toggle formControlName="toggle" [isDisabled]="reactiveDisabled" class="mx-2"></app-toggle>
13+
</div>
14+
<div class="ml-4 text-sm text-gray-600">
15+
<p>Current Value: {{ toggleControl.value | json }}</p>
16+
</div>
17+
<button type="button" class="ml-4 px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm font-medium" (click)="toggleReactiveDisabled()">
18+
{{ reactiveDisabled ? 'Enable' : 'Disable' }} Toggle
19+
</button>
20+
</form>
21+
</div>
22+
<div>
23+
<p class="font-medium mb-2">Toggle with ngModel</p>
24+
<div class="flex items-center gap-4">
25+
<div>
26+
<label for="toggle" class="mr-2 font-semibold">Toggle:</label>
27+
<app-toggle [(ngModel)]="toggleModel" [isDisabled]="ngModelDisabled" class="mx-2"></app-toggle>
28+
</div>
29+
<div class="ml-4 text-sm text-gray-600">
30+
<p>Current Value: {{ toggleModel }}</p>
31+
</div>
32+
<button type="button" class="ml-4 px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm font-medium" (click)="toggleNgModelDisabled()">
33+
{{ ngModelDisabled ? 'Enable' : 'Disable' }} Toggle
34+
</button>
35+
</div>
36+
</div>
37+
</div>
38+
</mat-card-content>
39+
</mat-card>
40+
</div>
41+
```

‎src/assets/examples/advanced/example13/example13.component.scss.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```scss
2+
:host{
3+
display: contents;
4+
}
5+
```

‎src/assets/examples/advanced/example13/example13.component.ts.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
```typescript
2+
import { Component } from '@angular/core';
3+
import { ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
4+
import { ToggleComponent } from './toggle-control.component';
5+
import { MatCardModule } from '@angular/material/card';
6+
import { MatButtonModule } from '@angular/material/button';
7+
import { JsonPipe, NgClass } from '@angular/common';
8+
import { RouterLink } from '@angular/router';
9+
import { CommonModule } from '@angular/common';
10+
11+
@Component({
12+
selector: 'app-advanced-example13',
13+
standalone: true,
14+
imports: [
15+
CommonModule,
16+
ReactiveFormsModule,
17+
FormsModule,
18+
ToggleComponent,
19+
MatCardModule,
20+
JsonPipe,
21+
NgClass
22+
],
23+
templateUrl: './example13.component.html',
24+
styleUrl: './example13.component.scss'
25+
})
26+
export class AdvancedExample13Component {
27+
toggleControl = new FormGroup({
28+
toggle: new FormControl<boolean>(false)
29+
});
30+
toggleModel = false;
31+
32+
reactiveDisabled = false;
33+
ngModelDisabled = false;
34+
35+
toggleReactiveDisabled() {
36+
this.reactiveDisabled = !this.reactiveDisabled;
37+
if (this.reactiveDisabled) {
38+
this.toggleControl.disable();
39+
} else {
40+
this.toggleControl.enable();
41+
}
42+
}
43+
44+
toggleNgModelDisabled() {
45+
this.ngModelDisabled = !this.ngModelDisabled;
46+
}
47+
}
48+
```

‎src/assets/examples/advanced/example13/toggle-control.component.ts.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
```typescript
2+
import { Component, forwardRef, Input } from '@angular/core';
3+
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
4+
import { NgClass } from '@angular/common';
5+
6+
@Component({
7+
selector: 'app-toggle',
8+
standalone: true,
9+
imports: [NgClass],
10+
template: `
11+
<div
12+
(click)="toggle()"
13+
[class.on]="value"
14+
[class.disabled]="isDisabled"
15+
class="cursor-pointer select-none px-6 py-2 rounded-full border-2 transition-colors duration-200 font-semibold text-center w-24"
16+
[ngClass]="{
17+
'bg-blue-600 text-white border-blue-600': value && !isDisabled,
18+
'bg-gray-200 text-gray-700 border-gray-400': !value && !isDisabled,
19+
'opacity-50 cursor-not-allowed': isDisabled
20+
}"
21+
tabindex="0"
22+
role="switch"
23+
[attr.aria-checked]="value"
24+
[attr.aria-disabled]="isDisabled"
25+
>
26+
{{ value ? 'ON' : 'OFF' }}
27+
</div>
28+
`,
29+
providers: [{
30+
provide: NG_VALUE_ACCESSOR,
31+
useExisting: forwardRef(() => ToggleComponent),
32+
multi: true
33+
}]
34+
})
35+
export class ToggleComponent implements ControlValueAccessor {
36+
@Input() isDisabled = false;
37+
value = false;
38+
39+
private onChange = (value: boolean) => {};
40+
private onTouched = () => {};
41+
42+
toggle() {
43+
if (this.isDisabled) return;
44+
this.value = !this.value;
45+
this.onChange(this.value);
46+
this.onTouched();
47+
}
48+
49+
writeValue(value: boolean) { this.value = value; }
50+
registerOnChange(fn: (value: boolean) => void) { this.onChange = fn; }
51+
registerOnTouched(fn: () => void) { this.onTouched = fn; }
52+
setDisabledState(isDisabled: boolean) { this.isDisabled = isDisabled; }
53+
}
54+
```

0 commit comments

Comments
 (0)