checkbox id attribute cannot be set to null and be ignored

[eginwong]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I'm trying to build a wrapper around the angular material library because there are certain customizations/enhancements that we want to add on top. When writing the wrapper, we pass inputs from the wrapper component to the angular material element. In this case, mdCheckbox.

When we don't set the value for "id" for our wrapper for mdCheckbox, it sets the <input> value for id to "input-". This is inconsistent as we don't set the value for "id" for our wrapper for mdSlideToggle and the <input> value for id is a unique value. Expected behaviour is that the <input> id value for mdCheckbox should be a unique, just like the implementation of mdSlideToggle.

What is the current behavior?

getting <input id="input-"> but should be unique like "<input id="input-checkbox-#">" or something along those lines.

What are the steps to reproduce?

http://plnkr.co/edit/2cvLOW?p=preview

What is the use-case or motivation for changing an existing behavior?

Inconsistency, hard to wrap components and expose inputs

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Using:

Angular 4.0.0, Material 2.0.0-beta.7, MACOSX, TypeScript 2.3.3

probably all browsers

Is there anything else we should know?

First time submitting bug report, please let me know if I'm missing anything for next time. Thanks!

[willshowell]

As a heads up, I expect you want to be binding to the inputs, not passing them as strings.. See the updated plunker

http://plnkr.co/edit/gUFRYa?p=preview

Regardless, you're right:

slide-toggle

get inputId(): string { return `${this.id || this._uniqueId}-input`; }

checkbox

get inputId(): string { return `input-${this.id}`; }

[devversion]

Yeah consistency makes sense here. I'm working on a PR that uses TypeScript mixins for the id generation.

This should ensure that we have everywhere the same id format and we don't have to repeat code multiple times.