Skip to content

Commit 81de147

Browse files
committed
refactor(material/chips): use ID generator
Switches to using the ID generator service to create unique IDs.
1 parent 3f46ec4 commit 81de147

File tree

2 files changed

+4
-8
lines changed

2 files changed

+4
-8
lines changed

src/material/chips/chip-input.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
booleanAttribute,
1919
inject,
2020
} from '@angular/core';
21+
import {_IdGenerator} from '@angular/cdk/a11y';
2122
import {MatFormField, MAT_FORM_FIELD} from '@angular/material/form-field';
2223
import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './tokens';
2324
import {MatChipGrid} from './chip-grid';
@@ -39,9 +40,6 @@ export interface MatChipInputEvent {
3940
chipInput: MatChipInput;
4041
}
4142

42-
// Increasing integer for generating unique ids.
43-
let nextUniqueId = 0;
44-
4543
/**
4644
* Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.
4745
* May be placed inside or outside of a `<mat-chip-grid>`.
@@ -107,7 +105,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
107105
@Input() placeholder: string = '';
108106

109107
/** Unique id for the input. */
110-
@Input() id: string = `mat-mdc-chip-list-input-${nextUniqueId++}`;
108+
@Input() id: string = inject(_IdGenerator).getId('mat-mdc-chip-list-input-');
111109

112110
/** Whether the input is disabled. */
113111
@Input({transform: booleanAttribute})

src/material/chips/chip.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {FocusMonitor} from '@angular/cdk/a11y';
9+
import {_IdGenerator, FocusMonitor} from '@angular/cdk/a11y';
1010
import {BACKSPACE, DELETE} from '@angular/cdk/keycodes';
1111
import {DOCUMENT} from '@angular/common';
1212
import {
@@ -46,8 +46,6 @@ import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
4646
import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
4747
import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
4848

49-
let uid = 0;
50-
5149
/** Represents an event fired on an individual `mat-chip`. */
5250
export interface MatChipEvent {
5351
/** The chip the event was fired on. */
@@ -142,7 +140,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
142140
}
143141

144142
/** A unique id for the chip. If none is supplied, it will be auto-generated. */
145-
@Input() id: string = `mat-mdc-chip-${uid++}`;
143+
@Input() id: string = inject(_IdGenerator).getId('mat-mdc-chip-');
146144

147145
// TODO(#26104): Consider deprecating and using `_computeAriaAccessibleName` instead.
148146
// `ariaLabel` may be unnecessary, and `_computeAriaAccessibleName` only supports

0 commit comments

Comments
 (0)