diff --git a/README.md b/README.md index 1666080..660363c 100644 --- a/README.md +++ b/README.md @@ -38,9 +38,9 @@ Add `` to your component's template: ```ts + (checkedChange)="onCheckedChanged($event)"> ``` @@ -56,9 +56,9 @@ Be sure to give each toggle a unique id. Failing to give each toggle a unique id | disabled | boolean | control is not interactable | ### Outputs -| Property | Type | Description | -|----------------|-------------------------|---------------------------------------------------| -| checkedChanged | EventEmitter\ | Emits new `checked` when control has been toggled | +| Property | Type | Description | +|----------------|-------------------------|---------------------------------------------------------| +| checkedChange | EventEmitter\ | Emits new `checked` value when control has been toggled | ## Attribution diff --git a/projects/ngx-toggle-example/src/app/app.component.html b/projects/ngx-toggle-example/src/app/app.component.html index b436f82..047d17d 100644 --- a/projects/ngx-toggle-example/src/app/app.component.html +++ b/projects/ngx-toggle-example/src/app/app.component.html @@ -9,8 +9,8 @@

ngx-toggle-example

Monthly - + Annually
diff --git a/projects/ngx-toggle-example/src/app/app.component.ts b/projects/ngx-toggle-example/src/app/app.component.ts index 5243623..f5a80e9 100644 --- a/projects/ngx-toggle-example/src/app/app.component.ts +++ b/projects/ngx-toggle-example/src/app/app.component.ts @@ -21,9 +21,8 @@ export class AppComponent { standardPriceParams = createNgAnimatedCounterParams(50, 50); premiumPriceParams = createNgAnimatedCounterParams(100, 100); - onCheckedChanged(checked: boolean): void { - this.checked = checked; - + onCheckedChange(checked: boolean): void { + console.log('checked:', checked); if (checked) { this.basicPriceParams = createNgAnimatedCounterParams(25, 12); this.standardPriceParams = createNgAnimatedCounterParams(50, 25); diff --git a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts index c10660f..32faab8 100644 --- a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts +++ b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.spec.ts @@ -73,7 +73,7 @@ describe('NgxToggleComponent', () => { describe('click', () => { it('should emit checkedChanged', async () => { const checked = true; - const resultPromise = firstValueFrom(component.checkedChanged); + const resultPromise = firstValueFrom(component.checkedChange); component.checked = !checked; fixture.detectChanges(); diff --git a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts index 2980e79..e097efd 100644 --- a/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts +++ b/projects/ngx-toggle/src/lib/components/ngx-toggle/ngx-toggle.component.ts @@ -10,9 +10,9 @@ export class NgxToggleComponent { @Input() id = 'ngx-toggle'; @Input() checked = false; @Input() disabled = false; - @Output() checkedChanged = new EventEmitter(); + @Output() checkedChange = new EventEmitter(); onClick(event: any): void { - this.checkedChanged.emit(event.target.checked); + this.checkedChange.emit(event.target.checked); } }