Preselected Element when using *ngFor

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>