I have following Code which will not select a Element, when loading the Component.
<option (click)="getSelectdDropdown(1, 'Python'); addNewItemFramework(1); checkForm()" [selected]="this.formGroup.controls['frameworkControl'].value=='1'">Python</option>
<option (click)="getSelectdDropdown(2, 'Ruby'); addNewItemFramework(2); checkForm()" [selected]="this.formGroup.controls['frameworkControl'].value=='2'">Ruby</option>
<option (click)="getSelectdDropdown(3, 'C#'); addNewItemFramework(3); checkForm()" [selected]="this.formGroup.controls['frameworkControl'].value=='3'">C#</option>
When I use *ngFor It always select the first Element. How should be the Code with ngFor?
<option *ngFor="let title of frameworkArray" >{{title}} {{this.frameworkArray.indexOf(title)}}</option>
The Framework Array is filled in the TypeScript Code.
So there are Elements in it
>Solution :
That’s not how you’re supposed to approach this.
You’re supposed to have a form control tied to your select, and angular will do anything by itself.
Here is an example : https://stackblitz.com/edit/angular-ivy-cke8ps?file=src%2Fapp%2Fapp.component.ts
export class AppComponent {
name = 'Angular ' + VERSION.major;
options = [
{ value: 0, label: 'Javascript' },
{ value: 1, label: 'Rust' },
{ value: 2, label: 'Python' },
{ value: 3, label: 'Golang' },
];
control = new FormControl(this.options[0].value);
}
Choose language :
<select [formControl]="control" placeholder="language">
<option *ngFor="let option of options" [value]="option.value">
{{ option.label }}
</option>
</select>