Unable to override id attribute for mat-option

[lokeshdaiya]

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

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

[ValentinBossi]

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

[Seh83]

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

[lokeshdaiya]

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