I’m trying to add a url button next to an mat-select option when it is selected. Clicking that button will open a new tab with info related to that option. I don’t want all options to have this button when the mat-select is dropped down, just when it is selected.
With the code below, the links appear in the dropdown and is clickable, but when an option is selected, the button is not clickable and just displays the text ‘Open’, no button visible.
I’m having trouble finding a solution for this. Does anyone how I can accomplish this?
<code><mat-select [formControl]="formControl" (optionSelected)="onSelected($event)">
<mat-option></mat-option>
@for (option of options; track option) {
<mat-option [value]="option.value">
{{option.key}}
<button (click)="openLink()">Open<button> <!-- only want this when it is selected -->
</mat-option>
}
</mat-select>
</code>
<code><mat-select [formControl]="formControl" (optionSelected)="onSelected($event)">
<mat-option></mat-option>
@for (option of options; track option) {
<mat-option [value]="option.value">
{{option.key}}
<button (click)="openLink()">Open<button> <!-- only want this when it is selected -->
</mat-option>
}
</mat-select>
</code>
<mat-select [formControl]="formControl" (optionSelected)="onSelected($event)">
<mat-option></mat-option>
@for (option of options; track option) {
<mat-option [value]="option.value">
{{option.key}}
<button (click)="openLink()">Open<button> <!-- only want this when it is selected -->
</mat-option>
}
</mat-select>
3