How to implement Optional chaining in ngModel using angular 18

Question

I have scenario in my project that a common shared service having a common variable (object) to store nested objects. I have to access and update its value in html using NgModel. Optional-chaining applied to nested object to access and update values because it can be null or undefined, but optional chaining is giving error that two-way binding don't support.

 <select
    class="form-select"
    name="font-size"
    id="fontSize"
    [(ngModel)]="cmServ.settingsData?.styles?.[elemId]"
  >
<!-- `Here 'elemId' can be null or undefined. 
And I can't set the 'default' value in ts as it will break
the flow of my application.

                  or 
if Id do this it will work

    [ngModel]="cmServ.settingsData?.styles?.[elemId]"
    (ngModelChange)="cmServ.settingsData.styles[elemId] = $event"

`-->
    <option [value]="''">Select</option>

    @for(size of fontSize; track size){
       <option [value]="size">{{size}}</option>
    }
  </select>

I have removed the optional chaining form the 'elemId' then its not giving me the error. Only for the first time when its empty.

<select
    class="form-select"
    name="font-size"
    id="fontSize"
    [(ngModel)]="cmServ.settingsData?.styles[elemId]"
  >
    <!-- 
  -->
    <option [value]="''">Select</option>

    @for(size of fontSize; track size){
       <option [value]="size">{{size}}</option>
    }
  </select>

Here is the link for dummy application:
https://stackblitz.com/edit/stackblitz-starters-t5esi6?file=src%2Fmain.html

Case also to be considered: In my application, 'elemId' is also set to null or empty string from far way/ main page component to reset the fields.

How I should apply the optional chain in the ngModel so the my application also wouldn't break and check also applied.

jaheraho · Accepted Answer · 2024-07-13 07:05:29Z

0

I can't tell you the fix at this moment.

But I have some general recommendation for you.

Don't

set attributes of a service within a component.
use attributes of a service in a components template.

Do

avoid stateful services.
if you want to have a stateful service, use getter/setter to access it's attributes.
have a dedicated model in your component, which you can use in your template.

If you want, you can rewrite your code considering my recommendations. Maybe it solves your issue in the first place. (Because you don't have chained access of a service variable!). If it doesn't fixes the problem, I will dive into that deeper.

But I refuse to fixes issues with direct access of service attributes within a component template 😉

answered Jul 13, 2024 at 7:05

jaheraho

5703 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement Optional chaining in ngModel using angular 18

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related