set value on tds-dropdown

[snlveo]

Describe the bug [value] = "myvalue" does not work on tds-dropdown in Angular To Reproduce I have a table and above the table i have input fields and dropdowns corresponding to the row colums. When i click on a row the values are copied to the corresponding tds-text-fields and tds-dropdowns waiting to be updated. The tds-text-fields shows the binded column value from the table using ([ngModel]) but the tds-dropdowns do not show any value, even when [value] = "mycolumnvalue" is set in the tds-dropdown template. Expected behavior As tds-text-field, set [value] = "mycolumnvalue" Code Example <tds-dropdown appExt name="dropdown" style="width: 180px" label="Scope" label-position="inside" size="md" open-direction="auto" noMinWidth="true" (keydown.delete)="mainModel.Scope = ''" [(ngModel)]="mainModel.Scope" [value]="mainModel.Scope"

<tds-dropdown-option *ngFor="let scope of scopes" [value]="scope"> {{scope}}

My collegue developer (Patrick Groot Koerkamp) created a directive and solved the problem for me 👍:

import { Directive, inject, Input } from '@angular/core'; import { TdsDropdown } from '@scania/tegel-angular-17';

@Directive({ selector: 'tds-dropdown[appExt]', standalone: false, }) export class TdsDropdownExtDirective { private readonly dropdownRef = inject(TdsDropdown);

@Input({ required: true }) set value(value: string | null) { this.dropdownRef.setValue(value ?? ''); } }

It will be very welkom when this solution is integrated in tds-dropdown so that we can use [value] = "myvalue" out of the tegel box :)

[mJarsater]

@theJohnnyMe I think this is another great example of controlled vs uncontrolled. We already have the defaultValue prop, not we just also expose a value prop which, if set, fully controls the value of the dropdown.

[theJohnnyMe]

True that, I will try to bring this up with development team ;) Thanks both for input!

[theJohnnyMe]

@snlveo I see that in directive setValue method is used which we have made for setting the value, however, we can inspect if we can have a prop called "value" and how using it should reflect on rest of the dropdown.