fix(multiple): include APP_ID in element IDs

[jelbourn]

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.

[crisbeto]

Should we have a common helper for this so in the future we only have one place we'd need to change?

[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 #29948.

[angular-automatic-lock-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.}