{"id":14617,"date":"2022-10-08T12:57:06","date_gmt":"2022-10-08T07:27:06","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/"},"modified":"2022-10-08T12:57:06","modified_gmt":"2022-10-08T07:27:06","slug":"solved-persist-class-property-angular-5","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/","title":{"rendered":"[Solved] Persist class property Angular 5"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You could either use a Service<\/code> or localStorage\/Session Storage<\/code> for Persisting Data.<\/p>\n

localStorage<\/code> and sessionStorage<\/code> accomplish the exact same thing and have the same API, but with sessionStorage<\/code> the data is persisted only until the window or tab is closed, while with localStorage<\/code> the data is persisted until the user manually clears the browser cache or until your web app clears the data.<\/p>\n

I would suggest you to go for @ngx-pwa\/local-storage<\/strong><\/a> Async local storage for Angular<\/p>\n

For Angular 5:<\/h1>\n
npm install @ngx-pwa\/local-storage@5\n<\/code><\/pre>\n
Register it in your RootModule<\/strong><\/p>\n
import { LocalStorageModule } from '@ngx-pwa\/local-storage';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    LocalStorageModule,\n    ...\n  ]\n<\/code><\/pre>\n
Inject and use it<\/strong><\/p>\n
import { LocalStorage } from '@ngx-pwa\/local-storage';\n\n@Injectable()\nexport class YourService {\n\n  constructor(protected localStorage: LocalStorage) {}\n\n}\n<\/code><\/pre>\n
Usage<\/strong><\/p>\n
let user: User = { firstName: 'Henri', lastName: 'Bergson' };\n\nthis.localStorage.setItem('user', user).subscribe(() => {});\n<\/code><\/pre>\n
After you navigate back and forth just set\/patch the values using one of these methods setValue()<\/code> and patchValue()<\/code> both sets the value in form control<\/code> of FormGroup<\/code>.<\/p>\n
Service<\/strong>
\nCreate a Service and Register the  it in an Angular module rather than a component.<\/p>\n
If you want an instance of a dependency to be shared globally and share state<\/code> across the application  configure it on the NgModule.<\/code><\/p>\n
You could either use Subject<\/code> or BehaviorSubject<\/code> to accomplish it.<\/p>\n
    \n
  1. \n
    Using Subject<\/a><\/strong><\/p>\n<\/li>\n
  2. \n
    Using BehaviorSubject<\/strong><\/p>\n<\/li>\n<\/ol>\n<\/div>\n
    <\/div>\n<\/div>\n
                <\/span> <\/p><\/div>\n<\/div>\n
    [ad_2]<\/p>\n
    solved Persist class property Angular 5 <\/p>\n","protected":false},"excerpt":{"rendered":"
    [ad_1] You could either use a Service or localStorage\/Session Storage for Persisting Data. localStorage and sessionStorage accomplish the exact same thing and have the same API, but with sessionStorage the data is persisted only until the window or tab is closed, while with localStorage the data is persisted until the user manually clears the browser … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[732,1802,651],"class_list":["post-14617","post","type-post","status-publish","format-standard","hentry","category-solved","tag-angular","tag-angular5","tag-typescript"],"yoast_head":"\n[Solved] Persist class property Angular 5 - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Persist class property Angular 5 - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You could either use a Service or localStorage\/Session Storage for Persisting Data. localStorage and sessionStorage accomplish the exact same thing and have the same API, but with sessionStorage the data is persisted only until the window or tab is closed, while with localStorage the data is persisted until the user manually clears the browser ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-08T07:27:06+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Persist class property Angular 5\",\"datePublished\":\"2022-10-08T07:27:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\"},\"wordCount\":166,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"angular\",\"angular5\",\"typescript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\",\"name\":\"[Solved] Persist class property Angular 5 - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-08T07:27:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Persist class property Angular 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Persist class property Angular 5 - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Persist class property Angular 5 - JassWeb","og_description":"[ad_1] You could either use a Service or localStorage\/Session Storage for Persisting Data. localStorage and sessionStorage accomplish the exact same thing and have the same API, but with sessionStorage the data is persisted only until the window or tab is closed, while with localStorage the data is persisted until the user manually clears the browser ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/","og_site_name":"JassWeb","article_published_time":"2022-10-08T07:27:06+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Persist class property Angular 5","datePublished":"2022-10-08T07:27:06+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/"},"wordCount":166,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["angular","angular5","typescript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/","url":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/","name":"[Solved] Persist class property Angular 5 - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-08T07:27:06+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-persist-class-property-angular-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Persist class property Angular 5"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14617"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14617\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}