Skip to content

Commit

Permalink
refactor(material/slide-toggle): use ID generator
Browse files Browse the repository at this point in the history
Switches to using the ID generator service to create unique IDs.

(cherry picked from commit 621ec01)
  • Loading branch information
crisbeto committed Nov 4, 2024
1 parent 2aa6e98 commit 755bf1a
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 7 deletions.
4 changes: 2 additions & 2 deletions src/material/slide-toggle/slide-toggle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ describe('MatSlideToggle without forms', () => {
fixture.detectChanges();

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

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

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

Expand Down
7 changes: 2 additions & 5 deletions src/material/slide-toggle/slide-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
ValidationErrors,
Validator,
} from '@angular/forms';
import {FocusMonitor} from '@angular/cdk/a11y';
import {_IdGenerator, FocusMonitor} from '@angular/cdk/a11y';
import {
MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,
MatSlideToggleDefaultOptions,
Expand Down Expand Up @@ -63,9 +63,6 @@ export class MatSlideToggleChange {
) {}
}

// Increasing integer for generating unique ids for slide-toggle components.
let nextUniqueId = 0;

@Component({
selector: 'mat-slide-toggle',
templateUrl: 'slide-toggle.html',
Expand Down Expand Up @@ -220,7 +217,7 @@ export class MatSlideToggle
this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
this.color = defaults.color || 'accent';
this._noopAnimations = animationMode === 'NoopAnimations';
this.id = this._uniqueId = `mat-mdc-slide-toggle-${++nextUniqueId}`;
this.id = this._uniqueId = inject(_IdGenerator).getId('mat-mdc-slide-toggle-');
this.hideIcon = defaults.hideIcon ?? false;
this.disabledInteractive = defaults.disabledInteractive ?? false;
this._labelId = this._uniqueId + '-label';
Expand Down

0 comments on commit 755bf1a

Please sign in to comment.