Value set when using lsInitFromStorage directive not being set on backing property

[syska]

Describe the bug

https://stackblitz.com/edit/angular-ivy-hdgjx6?file=src%2Fapp%2Fsub-module%2Fsub-module.module.ts

To Reproduce Steps to reproduce the behavior:

1. Go to https://angular-ivy-hdgjx6.stackblitz.io/sub
2. Type something into the bottom textbox ... the value changes. Value: {{ textModel }}
3. Reload the page. textbox is being set with the previously value, but the property bound to the input field is only getting updated when typing something.

Expected behavior I would expect the property in the component to be updated with the value set from the directives.

[bohoffi]

Hi @syska, This isn't an issue with the library. The directive was created to set UI elements properties from localstorage.

What's your actual use case? Have you tried refactoring the provided example using the provided decorator on the property (ngModel binding staying) instead of using the directive?

[syska]

@bohoffi

I have a component which is reused on multiple pages with different settings. Also the key which is used to specify what the value should be saved in local storage under.

For now I have just used the LocalStorageService directly and my own logic.

So I guess the directives is mostly used when getting the data directly from the form and not though bound properties.

I will try the decorator for other properties that is always needed to be saved in Local Storage, when I get to the other part of the application ... specifications are not in place yet.

Still love the package ...

[bohoffi]

Hey @syska,

'...Also the key which is used to specify what the value should be saved in local storage under....' I may miss something but I don't get what you want to do. What do you want to store additionally?

Maybe I should update the docs on the decorator and directive to be more clear about how they work. The directive is made to 'two-way bind' a localstorage value to a UI element so the stored value can be considered as the elements backing field. The decorator two-way binds a stored value to a property directly.

If this clears up your questions please let me know so I can close this issue.

[syska]

'...Also the key which is used to specify what the value should be saved in local storage under....' I may miss something but I don't get what you want to do. What do you want to store additionally?

I have a shared search component ... search-box-component ... depending on where it's used, I want to save the value under different names, or lsKey as used in this package.

So when the user goes back to users-list-component that uses search-box-component ... I can set the name so I can reuse my logic/components instead of copy/pasting ...

Thats the reason i needed this ... now I just have an @Input() decorator to set the key being used and then uses the LocalStorageService to fetch the value.

Maybe I should update the docs on the decorator and directive to be more clear about how they work. The directive is made to 'two-way bind' a localstorage value to a UI element so the stored value can be considered as the elements backing field. The decorator two-way binds a stored value to a property directly.

If this clears up your questions please let me know so I can close this issue.

This clears it up ... I might try the Decorator later to night ...