# Persist input value in Angular component
**URL:** https://community.cumulocity.com/t/persist-input-value-in-angular-component/7097
**Category:** Forum
**Tags:** persistency, cumulocity
**Created:** [August 3, 2022, 2:59pm UTC](https://community.cumulocity.com/t/persist-input-value-in-angular-component/7097 "2022-08-03T14:59:32Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@dacsystemsw](https://community.cumulocity.com/u/dacsystemsw)
#### Post date: [August 3, 2022, 2:59pm UTC](https://community.cumulocity.com/t/persist-input-value-in-angular-component/7097/1 "2022-08-03T14:59:32Z")
#### What product/components do you use and which version/fix level are you on?
Cumulocity IoT (backend **1011.0.19** frontend **1011.0.4** )
#### Is your question related to the free trail, or to a production (customer) instance?
Customer license
#### What are you trying to achieve? Please describe in detail.
Hi it’s Luca,
I don’t know how to persist an input field in an Angular component.
This is what i’ve done so far.
I created an empty project using: `c8ycli new spike-componentscommunication cockpit`
Then following [this](https://cumulocity.com/guides/web/tutorials/#1-initialize-the-example-application) tutorial, I created a new component with the corresponding item in the navigator. The result looks like this:
Side note: I’m using this input to feed a widget with its value
My problem is that if I enter a value then refresh the page I lose what I inserted before. I need the value to be persisted in some way.
[Here](https://community.cumulocity.com/t/ui-compoment-state-persistency/782) it’s exaplaned how to persist a value within a widget/dashboard context but I think this is not the same case.
Regards,
Luca
---
### Author:  [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)
#### Post date: [August 4, 2022, 2:36pm UTC](https://community.cumulocity.com/t/persist-input-value-in-angular-component/7097/2 "2022-08-04T14:36:54Z")
Hi Luca,
you could store/retrieve a single simple value easily e.g. in the [tenant options](https://cumulocity.com/api/10.13.0/#tag/Options) like this:
```auto
private readonly category = 'myCategory';
private readonly key = 'myKey';
constructor(private tenantOption: TenantOptionsService) {}
async storeInputFieldValue(value: string): Promise {
await this.tenantOption.update({ category: this.category, key: this.key, value });
}
async getValue(): Promise {
try {
const { data: tenantOption } = await this.tenantOption.detail({ category: this.category, key: this.key });
return tenantOption.value;
} catch {
// tenant option is initially not existing
return '';
}
}
```
Note that the any user accessing the tenant options requires a specific set of permissions to do so.
You might want to store more complex object in the [Inventory](https://cumulocity.com/api/10.13.0/#tag/Inventory-API) e.g. like this:
```auto
private readonly attribute = 'myObjAttribute';
constructor(private inventory: InventoryService) {}
async storeObjectValue(value: any): Promise {
try {
const existingObj = await this.getObject();
await this.inventory.update({
id: existingObj.id,
[this.attribute]: value
});
} catch {
// Object not found on first save
await this.inventory.create({[this.attribute]: value});
}
}
async getObjectValue(): Promise {
const obj = await this.getObject();
return obj[this.attribute];
}
private async getObject(): Promise {
const { data } = await this.inventory.list({ fragmentType: this.attribute, pageSize: 1 });
if (!data.length) {
throw Error('Not found');
}
return data[0];
}
```
note that this is just some pseudo code, that I did not actually run/test, but you might be able to get the idea.
Regards,
Tristan
---
### Author:  [@system](https://community.cumulocity.com/u/system)
#### Post date: [January 31, 2023, 2:37pm UTC](https://community.cumulocity.com/t/persist-input-value-in-angular-component/7097/3 "2023-01-31T14:37:47Z")
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.