How can I use in select dropdown with selected value with Angular 9

user_13183426 0
Viewed 1257

How can I use in select dropdown with selected value with Angular 9.

            <select [required]="egg.value" [(ngModel)]="protein.egg.sizeEgg"
              #eggSize="ngModel" name="eggSize">
              <option [value]="size" disabled>Size</option>
              <option>S</option>
              <option>M</option>
              <option>L</option>
            </select>

in angular 8 it work properly but in angular 9 it do problems inside terminal how can I fix it

terminal error

ERROR in src/app/home/home.component.html:67:32 - error TS2339: Property 'size' does not exist on type 'HomeComponent'.

67               <option [value]="size" disabled>Size</option>
                                  ~~~~

  src/app/home/home.component.ts:20:16
    20   templateUrl: './home.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.
src/app/home/home.component.html:67:32 - error TS2339: Property 'size' does not exist on type 'HomeComponent'.

67               <option [value]="size" disabled>Size</option>
                                  ~~~~

  src/app/home/home.component.ts:20:16
    20   templateUrl: './home.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

devtool error

home:1 Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Please I am wait to your help Thx:-)

angular9 html
1 Answers

I have added two option to handle.

Note : [value] or [ngValue] when you mention string value checking any variable inside component. You are getting this error because it checking this.size params but its doesn't exist.

Option 1: 

<select [(ngModel)]="eggSize"
               name="eggSize">
              <option value="size" disabled>Size</option>
              <option value='S'>S</option>
              <option value='M'>M</option>
              <option value='L'>L</option>
            </select>

Option 2: 

<select [(ngModel)]="eggSize"
               name="eggSize2">
<option *ngFor="let size of listSize" [ngValue]="size">
       {{size}}
    </option>
</select>

Option 3 : 

<select [(ngModel)]="eggSize"
               name="eggSize">
              <option [value]="" disabled>Size</option>
              <option [value]='1'>S</option>
              <option [value]='2'>M</option>
              <option [value]='2'>L</option>
            </select>

https://stackblitz.com/edit/angular-ivy-uq1xjs

Use like this. adding stackblitz for reference.

enter image description here

user_62850540
Related