Skip to content

Commit 621ec01

Browse files
committed
refactor(material/slide-toggle): use ID generator
Switches to using the ID generator service to create unique IDs.
1 parent 7f22090 commit 621ec01

File tree

2 files changed

+4
-7
lines changed

2 files changed

+4
-7
lines changed

src/material/slide-toggle/slide-toggle.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ describe('MatSlideToggle without forms', () => {
173173
fixture.detectChanges();
174174

175175
// Once the id binding is set to null, the id property should auto-generate a unique id.
176-
expect(buttonElement.id).toMatch(/mat-mdc-slide-toggle-\d+-button/);
176+
expect(buttonElement.id).toMatch(/mat-mdc-slide-toggle-\w+\d+-button/);
177177
});
178178

179179
it('should forward the tabIndex to the underlying element', () => {
@@ -235,7 +235,7 @@ describe('MatSlideToggle without forms', () => {
235235

236236
// We fall back to pointing to the label if a value isn't provided.
237237
expect(buttonElement.getAttribute('aria-labelledby')).toMatch(
238-
/mat-mdc-slide-toggle-\d+-label/,
238+
/mat-mdc-slide-toggle-\w+\d+-label/,
239239
);
240240
});
241241

src/material/slide-toggle/slide-toggle.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import {
3535
ValidationErrors,
3636
Validator,
3737
} from '@angular/forms';
38-
import {FocusMonitor} from '@angular/cdk/a11y';
38+
import {_IdGenerator, FocusMonitor} from '@angular/cdk/a11y';
3939
import {
4040
MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,
4141
MatSlideToggleDefaultOptions,
@@ -63,9 +63,6 @@ export class MatSlideToggleChange {
6363
) {}
6464
}
6565

66-
// Increasing integer for generating unique ids for slide-toggle components.
67-
let nextUniqueId = 0;
68-
6966
@Component({
7067
selector: 'mat-slide-toggle',
7168
templateUrl: 'slide-toggle.html',
@@ -220,7 +217,7 @@ export class MatSlideToggle
220217
this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
221218
this.color = defaults.color || 'accent';
222219
this._noopAnimations = animationMode === 'NoopAnimations';
223-
this.id = this._uniqueId = `mat-mdc-slide-toggle-${++nextUniqueId}`;
220+
this.id = this._uniqueId = inject(_IdGenerator).getId('mat-mdc-slide-toggle-');
224221
this.hideIcon = defaults.hideIcon ?? false;
225222
this.disabledInteractive = defaults.disabledInteractive ?? false;
226223
this._labelId = this._uniqueId + '-label';

0 commit comments

Comments
 (0)