Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to override id attribute for mat-option #11572

Closed
lokeshdaiya opened this issue May 30, 2018 · 5 comments · Fixed by #11573
Closed

Unable to override id attribute for mat-option #11572

lokeshdaiya opened this issue May 30, 2018 · 5 comments · Fixed by #11573
Assignees
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@lokeshdaiya
Copy link

lokeshdaiya commented May 30, 2018

Bug, feature request, or proposal:

Unable to override id attribute of mat-option although its working for mat-select because mat-select has id attribute as Input.

What is the expected behavior?

when id attribute is applied on mat-option it should assign the value

<mat-option id="mytest"> </mat-option>

so finally id should be mytest but it renders like mat-option-{{some number}}

What is the current behavior?

Currently it renders id like mat-option-{{some number}}

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

https://stackblitz.com/edit/angular-oqji4e?file=app/select-overview-example.html

image

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

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

angular 5+
material 5+
typescript 2.4+

Is there anything else we should know?

As I can see in the line id is not used as Input and it has only getter method
https://github.com/angular/material2/blob/b090f6d01a3d2ac2fbb6a10df31f6f89e6b66110/src/lib/core/option/option.ts#L98

@crisbeto crisbeto self-assigned this May 30, 2018
@crisbeto crisbeto added has pr P4 A relatively minor issue that is not relevant to core functions labels May 30, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue May 30, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes angular#11572.
@ValentinBossi
Copy link

shouldnt you use [id]="mytest" ?
for me id="index" in a ngFor isnt working but [id]="index" do.

andrewseguin pushed a commit that referenced this issue Jun 5, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes #11572.
andrewseguin pushed a commit that referenced this issue Jun 7, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes #11572.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 13, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes angular#11572.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 30, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes angular#11572.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 30, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes angular#11572.
@Seh83
Copy link

Seh83 commented Aug 22, 2018

Hi @lokeshdaiya ....

I overcame this bottle neck with the following solution:

By creating a tag inside the , and assigning the id attribute to span tag.

<mat-option *ngFor="let food of foods" [value]="food.value"> <span id={{food.id}}>{{food.value}}</span> </mat-option>

Hope it helps :)

Sehul. V

jelbourn pushed a commit that referenced this issue Aug 23, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes #11572.
@lokeshdaiya
Copy link
Author

@Seh83 Yes that can be done but my requirement was something else thats why I needed to override mat-option id.

jelbourn pushed a commit that referenced this issue Aug 24, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes #11572.
jelbourn pushed a commit that referenced this issue Aug 29, 2018
Fixes consumers not being allowed to set their own id on a `mat-option`.

Fixes #11572.
@houssamhammoud
Copy link

@Seh83 did you found a solution?

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants