fix(multiple): include APP_ID in element IDs

[jelbourn]

trafficstars

Many components generate element IDs, which are used primarily for accessible labeling. The IDs all use an incrementing number concatenated with some stirng specific to that component. This change add Angular's APP_ID into these IDs in order to avoid ID collisions in cases where there are multiple instances of Angular running on the same page.

[jelbourn]

Yeah, I could see having something like

let nextId = 0;

@Injectable()
class IdGenerator {
  appId = inject(APP_ID);
  generateId(prefix: string) {
    return `${prefix}${this.appId}${nextId++}`;
  }
}

I guess in cdk/a11y ? Not sure there's a more appropriate place for it

[crisbeto]

Yeah I think cdk/a11y would be appropriate for it.

[jelbourn]

Updated the PR to include an IdGenerator class (in its own commit) and then use that class in most of the ID generation. I intentionally left stepper and tab-group because they do something slightly different

[crisbeto]

Closing in favor of https://github.com/angular/components/pull/29948.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}