title: Angular 10 setting selected option value in dropdown list in edit component
body: <p>in angular and asp.net application, I have an edit form in my component with multiple select options in  dropdown list, where display all data in edit form except  dropdown list  fields is displayed as empty with all dropdown list values not with formerly stored dropdown list value.
  So I need to set the selected option value in the dropdown list when i go to the edit form in edit.component.html.
  this is my edit.component.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  id: number;
    userForm: FormGroup;
    Charity: Charities;
    Charities: Charities[];
    users: Users[];
    Cities: City[];
    Categories: Category[];
    selected: any;
    Regions: Region[];
    constructor(private activateRoute: ActivatedRoute,private route: Router,private fb : FormBuilder, private CharityService : CharityService,private toastr: ToastrService , private RegisterService : AccountService, private router : ActivatedRoute) { }
  
    ngOnInit(): void {
      var userId = this.router.snapshot.params['id'];
      this.setForm(userId);
      this.CharityService.GetAllCategories().then(res =&gt; this.Categories = res as Category[])
      this.CharityService.GetAllRegions().then(res =&gt; this.Regions = res as Region[])
      this.CharityService.GetAllUsers().then(res =&gt; this.users = res as Users[]); 
      this.users = [];
    }
    get editFormData() { return this.userForm.controls; }
  
  
    private setForm(id:number) {
      this.CharityService.GetCharit(id).then(x =&gt; {
  
        this.Charity = x;
        this.userForm = this.fb.group({
          id: [this.Charity.id, [Validators.required]],
          name: [this.Charity.name, [Validators.required]],
          phone: [this.Charity.phone, [Validators.required]],
          SubCategoryId: [this.Charity.SubCategoryId, [Validators.required]],
          RegionId: [this.Charity.RegionId, [Validators.required]],
          CityId: [this.Charity.CityId, [Validators.required]],  
          Category:[this.Charity.Category, [Validators.required]],
        });
      });
  
    }</code></pre>
  </div>
  </div>
  </p>
  <p>this is edit.component.html</p>
  <p>for example formControlName=&quot;SubCategoryId&quot;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;select class="custom-select" [(ngModel)]="Categories" formControlName="SubCategoryId" [ngClass]="{'is-invalid' :!this.userForm.get('SubCategoryId').valid &amp;&amp; this.userForm.get('SubCategoryId').touched}" [(value)]="selected" required&gt;
  &lt;option selected value="" disabled class="dove"&gt;اختر التصنيف&lt;/option&gt;
  &lt;option *ngFor="let cat of Categories" [value]="cat.id"&gt;{{cat.subCategoryName}}&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>can any one help me</p>