{"id":1559,"date":"2023-01-24T11:19:40","date_gmt":"2023-01-24T11:19:40","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=1559"},"modified":"2025-09-23T03:48:18","modified_gmt":"2025-09-23T03:48:18","slug":"how-to-use-ngrx-store-in-an-angular-15-application","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/","title":{"rendered":"How to Use NgRx Store in an Angular 15 Application?"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/in-yiVf7sAVdKkkPoVR_26-7Lp100zg92oztvR7PqLNTpDuhU76HLNw0auK3y6tlA5fVR2rI8Ap1pxzuHB3k0clJpK1oYyIHxGrXUt8wvQM5F_5YABEnLmz9ExZAVEuIxbblBQPZSBZTPF_BEszv1DJY4l4KensAfdBKVnkyadGj8gcW6JTD1BJUw09yLg\" alt=\"NgRx Store in an Angular 15 Application\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">With reference to the previous blog on <a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-manage-state-in-a-react-application-using-redux\/\">state management with React and Redux<\/a>, we will look at state management in an Angular 15 application using the NgRx store in this blog.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">NgRx is derived from Ng(the conventional name for Angular tools and ecosystem) and Rx(Reactive Extensions).<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Moreover, for anyone who has used Angular, you have already used Reactive Extensions if you have used the <strong>rxjs<\/strong> library.&nbsp;<\/p>\n\n\n\n<p>In this blog, we will cover:<\/p>\n\n\n\n<ul><li>What is RxJS?<\/li><li>Analogy<\/li><li>What is NgRx Store?<\/li><li>Hands-on<\/li><li>Conclusion<\/li><\/ul>\n\n\n\n<h2>What is RxJS?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">RxJS is the JavaScript implementation of ReactiveX(Reactive Extensions) which is an API that implements the Observer pattern in asynchronous programming.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">You can read more about ReactiveX at <a href=\"https:\/\/reactivex.io\/\">https:\/\/reactivex.io\/<\/a>. Let us try and break this down using simple terms and analogy. The Observer pattern mainly consists of an Observer and an Observable.&nbsp;<\/p>\n\n\n\n<p class=\"has-text-align-justify\">An Observable neatly handles asynchronous data or streams of data or events while saving you the complexity of callbacks and\/or thread management.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">RxJS also comes with certain operators such as <strong>map<\/strong>, <strong>takeUntil<\/strong>, <strong>debounce<\/strong> just to name a few which are very powerful tools that allow a developer to transform the streams of data in the Observable.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">An Observer is a function that subscribes to an Observable and makes three main \u201cObservations\u201d which are; the latest value emitted from the stream of data, any errors that may occur, and lastly, whether the streaming is complete.<\/p>\n\n\n\n<h2>Analogy<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Let us assume that you have partnered with Workfall and by virtue of being a partner you receive email updates regarding your daily work submissions.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this case, becoming a Workfall partner is automatically a subscription and you are now an Observer because you receive daily updates.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">When a time comes and you want to leave Workfall, you will no longer receive the updates because you have unsubscribed and are no longer an Observer.<\/p>\n\n\n\n<h2>What is NgRx Store?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">NgRx store is a state management library that utilizes the power of RxJS to create a state-of-the-art framework for handling global and local states for Angular applications.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Also equally important the NgRx store is heavily inspired by Redux.<\/p>\n\n\n\n<h2>Hands-On<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/v8Zukjh_JiiBwak5nIEr31FSUWRlo62WesioD8WW7Hp1S7cVGggKqT9hPcT3OOeIeYhQS9TL_XmhOPy5aZGlzHIYsvBwiRGlmRmUVNX6HDcOvmqbBuertrv5bpfbBsPe1yJ3NoGposUYLvFFfTkeb7_diIzQy280PVGrka0YZ1zAu5k90Wk2yMe1eTp0Ug\" alt=\"NgRx Store in an Angular 15 Application\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we shall create an Angular application that fetches information about cryptocurrencies and visualizes the data in the form of charts.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The source code of this application is found at&nbsp; <a href=\"https:\/\/github.com\/workfall\/workfall-ngrx\/tree\/v1.0.0\">https:\/\/github.com\/workfall\/workfall-ngrx\/tree\/v1.0.0<\/a>.<\/p>\n\n\n\n<p>Following are a few snapshots of the application which we will be creating. <\/p>\n\n\n\n<p><strong><img src=\"https:\/\/lh5.googleusercontent.com\/7C41pKMux5Sw1YNDCGnBW-9rCaz0iG1-dlAHt3w4QD-w-CR2FJW-z1snxgaRicr4daIuTNwGpspRms5Bw80iMy_VokA3QSxlPWfqLlHiJ6zkRg8uFMJ4ZUCIc_8QQmAinvsloFFyAa-eCV6uAOZV_aHMrDRA_-jHGKA7YLG3GXhxJyS1Fmfoi9v5iCptnQ\" style=\"width: 1600px;\"><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/1MGwpQPrZNaemLh7CIpY8Uw79Fb1hZO2z1ntLRHS9aPeBdh8VvkVJFjDAzsQWHTnzYw4GM2XskWOXyAP77S1ejyIF9pU0pNuDaYmfIadgzvSOXqdi8u2rkH9WqgPiq5Wh3Dq__B-RG-I2nS0VPkq19tMxA0t77q5XhqHMH9u4ZLvP-o8AgBzwu4IlZs-5w\" alt=\"cryptocurrencies\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/JkFZ_Pb0of83F76zunKBmpxNSwXvyA1kWDtVSlaoI1Pdcl3EsxWdnHxky6lIElflxd3yXW5GdXT_ndlSWxwcNhwN5WK6T2PkJoECfgwtBAT5p-kP-F5EwnuKEFFc2ZZf3M_6eaH1c8VcPO-cI1_9vyXdPliQxrsp8oXw2ex21zvmAJC9N3jxG8sJ6chuXw\" alt=\"cryptocurrencies\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">We shall start by creating the application without using the NgRx store so that we see the notable differences between the two implementations.<\/p>\n\n\n\n<h3>Installations<\/h3>\n\n\n\n<p>Check that the following programmes are installed on your computer:<\/p>\n\n\n\n<ul><li>Node.js<\/li><li>Angular CLI<\/li><\/ul>\n\n\n\n<p>The main npm packages which we shall use in the application are <strong>echarts<\/strong>,<strong> ngx-echarts<\/strong>, and<strong> tailwindcss.<\/strong><\/p>\n\n\n\n<h3>Implementation Without NgRx Store<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Let us start by going the common route, we shall create a service then we shall inject that service into all the components that need the data that the service provides.&nbsp;<\/p>\n\n\n\n<p><strong>api.service.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/bG5qaEZCKBg0lJi36GHdEj0X4MbpsXC5y_YbMVAlXEcHcLjVHXy_JdjlLmxGYcQIZ-9-1Duvqa4TFOuqCNXrsrfqYl1KejLZ1oFysUjAPlGtKYT2CAAvh9nPwWG8gKaZe-i6dP166B3GCtkfmoLjL8dvTeIUdH7cTTtZ5IM7Jav2LVZu_02Mm981L2E4bA\" alt=\"NgRx Store\"\/><\/figure>\n\n\n\n<p><strong>bar-chart.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/akCX9ed1YOcX7goHzOdNtqIzOkjq15Mv6tNGyMEN4aftZYfvaYmUTRraC2yQOfd1H2MASCmwTMyRLSjD53LJlqPhA44a922Gm0f0MwlCqJH4ItE5XykHfI2FNiNlrq6L255Q10gHVXla8Jei2HAvxNz4QhGBzhlwwj4wOcFYGbkOTZYkgSDmSm1XWhWGSQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>line-chart.component.ts<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/_mU2CwDzfgLpaeE-osYSUYD0Ax_MBCl9ZJzGXd4eedhZ1l-vdHcFSWPyzZiyT63fejRM1RsQIFMKPxMlRbimHKPhZK8CWwJPOqJ_FIsYp3KY2xQQG036DiXo2s2J-LVKwHyGMqNwHqcIBpanTjhEFYTOnuB0fHzzm6YyFoDQGX3ma-F-XiRXCPqFU_vTEQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>radial-bar-chart.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/uzZMtHRFCvCz1xZrtACftpv3UU2J7xwSEEeKL44DuEpNSs_eSMDM70fkvDbDaBMndcCiuIDhuLeHTFzJpUh6f8j1ryRQOlUi_MnDwt5qDbgskFZ1PG3j_T9mrahApxYEVB7bXbu3_f3EYLfZl5Lx_ygzzaY6nQI48a9pbpEjTYdQuCS0BWlKbCCsuw7zEw\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>radial-bar-chart.component.ts(2):<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/-ucllthAeN__zZnqPgqwvre3Nt8binuonYYkPOMF9xcGU4GQyx1TDjFpREYf2y_IHyH5Nl8fI_4Osu8Vnz556rg4F1an0P9cl2-2FvoL9NLWxEnzYLamUkgh1NH7fgCLEPF3vNZk2mEa0qssa413TzvRt2jWYI7zVnrp5kAdcY-adoAeRhDiHx61qB0avA\" alt=\"\"\/><\/figure>\n\n\n\n<p>The above implementation of injecting a service into all components has its limitations which are analyzed below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/vl75GH-eJGHAG8vpM2Ou-uhVNF4KOB3abyC-rPL3wS6z1s3yiuU41zUOgnfjxqxudHJ-pfGlj5HgqkWkeEuT7Wg8r9tKaNghfNWBYUgGz2xgg5dsJiYxGZICeKNmgZQLwc27Khrwx8Sd4jbH4RO8wvW17UvtAOgkvl7NXyw0WbkP8eJy49fDaRhdA0_yiw\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">To reproduce the behavior, open the developer tools and go to the Network tab.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Refresh the page and you\u2019ll notice one HTTP request was made.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">If you click on the other two tabs you will see that on each navigation you make to a route, the same HTTP call from the shared service is made severally yet it is the same data.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">And it is so unnecessary that it might be costly if you are using backend services that are charged per request such as the one we used in this example.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/f3p48Iqo7gJVus77KSDbhkKAKXUoXexUROlcl2o27A1CK-l83rotlgO0_LH4OPnYzt8dYWnFTby0qTMj4mSYYINwIMDScJ_IlyzVQaABF5MMy4BzSz9p5CYpXpLQswYaRueJwOzyG4jpT0lVj1DBtdcIiMzTTAveNJOZTt-vp3IShMiMbxK36Xu9fhOGXQ\" alt=\"coinranking\"\/><\/figure>\n\n\n\n<h3>Implementation With NgRx Store<\/h3>\n\n\n\n<p>This source code is found at <a href=\"https:\/\/github.com\/workfall\/workfall-ngrx\/tree\/v1.1.1\">https:\/\/github.com\/workfall\/workfall-ngrx\/tree\/v1.1.1<\/a>&nbsp;<\/p>\n\n\n\n<p>Folder structure:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/Wia4K8OfhtsJaRiVCl4UI6PfU3iYrEwg_99cPw7wvz1bHj1PlyqzYvg0YTOKmss5R5UleFFgBWPIAY1SNeZdEZiW_21xz5lYnhE4axuF1e5uNlQbXWXe4yd-ZeTHK0LK-Yyem2B9j602HOHGYXAVOXw2XjPA93llV16FVwXi6Jk9AASIGi6Eb6J5zapo_g\" alt=\"NgRx Store\"\/><\/figure>\n\n\n\n<h3>Configuring NgRx Store<\/h3>\n\n\n\n<p class=\"has-text-align-justify\">Install the following packages from npm or using Angular schematics or the following command <strong>npm i @ngrx\/effects<\/strong> <strong>@ngrx\/store<\/strong> <strong>@ngrx\/store-devtools<\/strong>.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The dev tools are used in conjunction with the <strong>Redux Devtools<\/strong> browser plugin to help in debugging store-related issues.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">The store folder has 3 directories namely; actions, reducers, and effects.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">In the actions directory, we have the user-defined store events which will be dispatched from components.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">In the reducers directory, we have event handlers that update the state, and finally, in the <strong>effects<\/strong> directory, we have API calls; so API calls will no longer happen at the component level.<\/p>\n\n\n\n<p><strong>coins.actions.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/4FjVrVUFZKgQw545BHSicrbVvy99oNbGNGZIQ_QqzJRdVS3Ou6X42AgV1RbHsvByeS-Dg3WDPphXeML9bT5G5cpRIfVlFvClzgpIgHSNfl7l82BvTdixBec2KvEyjdbz6w7x_ZMrBS5whPpda2cQbhCnHSyfGT85F6el5pXKjGpemMKLN8WdpyvIvRZe8g\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>coins.reducer.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/dN-4UAZyaSTQqnsI0TSDbA3xkDmNagRkFts8vitV3_2b4_ULuATlx2ItZ6llj4CnuNKJh1iZq-uvyIL8QFvjlkdSfRlmh7JRKKN-IOdI-Gf6w8TAQrR1JbOc_lD5c__X7gQhrAyBMRW8i43oepzJk_RY25432yXZooJJkggoP2Zq9Do1KOQpOeLO9YA10Q\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>coins.effects.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/OG2QKrr_lARSwjxJXSGTRUvgVCunHzOpdnoyBJzGklXJ9j8ZdPbpFMKFuUfQoH6sGYQRb4dpre4XuYqqeowl4BkNorqZqOPt8Vvvughlz1fR76v6UEHUrkqNqDz_BrYNCGDqizCA5MmoTJWeC-U7SDg0DA1Gi46uHwv3DqSBjn_WM_M-IjrvClky9GwGRQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>app.module.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/GrXnbcBlw8cYqPmouX2fCPhYmZXsPXBkqGtGa9uk7CFFSw66l4WS8_p2X_FrtkkDFrrRDx7AlzkT6GXZADPotS0DI9gnoYmcBcqVaFB_79n-og8NDcyhFb6YXImp1M73j3KXqK5-zW9qhiyBNrlk_ns_V370f0g5jEaj0nykUrYVYVoalQu1v3JTMdcduw\" alt=\"\"\/><\/figure>\n\n\n\n<h3>Using the Store in Components<\/h3>\n\n\n\n<p><strong>bar-chart.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/rno2aFORrt2iZkUWAkpq9-jOEgy9kfoHllJksU6iSCjgprDLLzjUdg0uvDJesXpfkrSoJ-lxW8xSbux21qn3mlnxJ-r_Wy7_SOZGX2BqWbMhtclloXyow2RBeeqMBrGfJ3XL9-frk_syPkzCbBBQOGrcWvitVof99b2Dece9_VnCIpx4iBgx6FyEz18TDQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>line-chart.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/R0OfLoIApz8kkkdJ4GSL1YFA-Nr4MkL-y9UsfDF_747jIjBgWS6DhwNTrquMaqG_aVaE_JxBlmoNitWYNjcV2nYADGy2WfFbMw9kQWKB4gTdRBob-KDXR1-LDeNqk8cdnSru0b0DBJvM_15wYNO6ppi_-q-kn2907Qj7k0YCMG304cnSRoZAqG-8lFms4w\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>radial-bar-chart.component.ts:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/lfw2693YJOk5Z26WDmbL3TMyIpHvrePK6jYBBv5lNv21GeuQUQx1m3JkLDE9Pj7K1lYmpY9V6Wl325EWk-VTvnzxPu7Wu9V2YeX8bR47H-SxvThT0sf-fo5nUlDl6HlcuQ8ozPAXvnyvgfvGBDlmPhFFRGNC_I4nWFJ2SBIqMO0keMBaT4uySupdWi8_Rw\" alt=\"NgRx Store\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">We shall try to reproduce the number of requests that are made to the server when using data from the store.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Open developer tools, refresh the page, and navigate between the tabs several times.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Besides, you will notice that only one request was made to the server and no matter how many times you navigate through the tabs, no new requests are made.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/x42bUfqaWryhGbz17NoYxgDjy1cT-YRG7poDYKvWovUHyOhAbn6Sa0nR1avoGKnXqqLpGFVUttt2_-KzmUO81xoUw7h9rT2khEUxYXSICAA6wW5MvPZsZ77frLYZcPd-zVHDgHvzi78oALTSYt54Znc57SqRGMcxYCZHWYAFcuGXoMvz45PbEf2x8lS_Ng\" alt=\"NgRx Store\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">At last, just to make sure that the store is working perfectly, look at the Redux Devtools browser plugin and you will see all the data in the plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/JToMa9JWg8UiJ4nFmnI57iB-UmZn3lAGKGSiKcGT4y5gm3FzpH3m3fjCFp3A-UmUgtSuMen5aS816v8QqThQd_BOwjpuGebQ9tH2J9ePHXxmqQXQGzu_aL-Z-eF8wH4s3OXHphaKYzqBy3mFnfPcQjlfT4LNG1p58m45Ur-jOA051GzqH_LOvJaQ7417bA\" alt=\"NgRx Store\"\/><\/figure>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, first, we looked at how to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We realized how we can save on costs we make to servers that charge per API request.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">We also learned briefly about RxJS.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">It is important to note that there is a pitfall when we use the NgRx store whereby in order to get the latest value in the stream, we have to introduce what we call <strong>polling<\/strong>.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Polling refers to fetching data from the API at regular set intervals.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Lastly, the advantage is that RxJS offers an operator known as <strong>debounce<\/strong> to help with polling. We will come up with more such use cases in our upcoming blogs.<\/p>\n\n\n\n<p><strong>Meanwhile\u2026<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">If you are an aspiring Angular Developer and want to explore more about the above topics, here are a few of our blogs for your reference:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-forms-in-an-angular-15-application-using-jasmine\/\">How to Write Unit Tests for Forms in an Angular 15 Application Using Jasmine?<\/a><\/li><li><a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-write-unit-tests-for-angular-15-application-using-jasmine-and-enforce-code-quality-in-a-ci-workflow-with-github-actions\/\">How to Write Unit Tests for Angular 15 Application Using Jasmine and Enforce Code Quality in a CI Workflow With Github Actions?<\/a><\/li><li>\u200b\u200b<a href=\"https:\/\/www.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/\">How to Create &amp; Use Standalone Components in Angular 14?<\/a><\/li><\/ul>\n\n\n\n<p>Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.<\/p>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">At <a href=\"https:\/\/www.workfall.com\/\">Workfall<\/a>, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you\u2019re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at <a href=\"https:\/\/www.workfall.com\/partner\/\">workfall.com\/partner<\/a> today!<\/p>\n\n\n\n<p><\/p>\n\n\n<style type=\"text\/css\"><\/style><section id='' \n                class='helpie-faq accordions faq-toggle open-first groupSettings-508__enabled' \n                data-collection='' \n                data-pagination='0' \n                data-search='0' \n                data-pagination-enabled='0'\n                role='region'\n                aria-label='FAQ Section'\n                aria-live='polite'><h3 class=\"collection-title\">Frequently Asked Questions:<\/h3><article class=\"accordion \"><div class='helpie-faq-row'><div class='helpie-faq-col helpie-faq-col-12' ><ul><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2866\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2866\"\r\n                data-id=\"post-2866\" \r\n                data-item=\"hfaq-post-2866\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What is NgRx Store and why is it used in Angular?<\/div><\/div><div id=\"accordion-content-post-2866\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2866\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> NgRx Store is a state management library that uses Redux principles to handle complex state in Angular apps.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2867\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2867\"\r\n                data-id=\"post-2867\" \r\n                data-item=\"hfaq-post-2867\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. How does NgRx Store help with state management?<\/div><\/div><div id=\"accordion-content-post-2867\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2867\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>\u00a0A:<\/strong> It centralizes state, making it predictable, testable, and easier to debug.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2868\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2868\"\r\n                data-id=\"post-2868\" \r\n                data-item=\"hfaq-post-2868\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. Can I use NgRx with Angular versions earlier than 15?<\/div><\/div><div id=\"accordion-content-post-2868\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2868\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> Yes. NgRx works with earlier versions, though some features may require the latest Angular.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2869\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2869\"\r\n                data-id=\"post-2869\" \r\n                data-item=\"hfaq-post-2869\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. What are common challenges in implementing NgRx?<\/div><\/div><div id=\"accordion-content-post-2869\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2869\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>A:<\/strong> The learning curve, boilerplate code, and over-engineering for small projects.<\/span><\/p>\n<\/div><\/li><li class=\"accordion__item \"><div class=\"accordion__header \" \r\n                id=\"accordion-header-post-2870\"\r\n                role=\"button\"\r\n                aria-expanded=\"false\"\r\n                aria-controls=\"accordion-content-post-2870\"\r\n                data-id=\"post-2870\" \r\n                data-item=\"hfaq-post-2870\" \r\n                style=\"background:transparent;\" \r\n                data-tags=\"\"\r\n                tabindex=\"0\"><div class=\"accordion__title\">Q. Is NgRx suitable for small-scale Angular projects?<\/div><\/div><div id=\"accordion-content-post-2870\" \r\n                class=\"accordion__body\" \r\n                role=\"region\"\r\n                aria-labelledby=\"accordion-header-post-2870\"\r\n                style=\"background:transparent;\"><p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><span style=\"font-weight: 400\"><strong>\u00a0A:<\/strong> It can be, but for simple projects, Angular services or signals might be enough.<\/span><\/p>\n<\/div><\/li><\/ul><\/div><\/div><\/article><\/section>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> With reference to the previous blog on state management with React and Redux, we will look at state management in an Angular 15 application using the NgRx store in this blog. NgRx is derived from Ng(the conventional name for Angular tools and ecosystem) and Rx(Reactive Extensions). Moreover, for anyone who has used Angular, you have [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1560,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[289],"tags":[100,378,278,354,389,392,391,390,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use NgRx Store in an Angular 15 Application? - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"How to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use NgRx Store in an Angular 15 Application? - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"How to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-24T11:19:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-23T03:48:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png\",\"width\":1200,\"height\":628,\"caption\":\"NgRx Store in an Angular 15 Application\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#webpage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/\",\"name\":\"How to Use NgRx Store in an Angular 15 Application? - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#primaryimage\"},\"datePublished\":\"2023-01-24T11:19:40+00:00\",\"dateModified\":\"2025-09-23T03:48:18+00:00\",\"description\":\"How to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.\",\"breadcrumb\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learning.workfall.com\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use NgRx Store in an Angular 15 Application?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#webpage\"},\"author\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"How to Use NgRx Store in an Angular 15 Application?\",\"datePublished\":\"2023-01-24T11:19:40+00:00\",\"dateModified\":\"2025-09-23T03:48:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#webpage\"},\"wordCount\":1149,\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png\",\"keywords\":[\"angular\",\"angular15\",\"crypto\",\"cryptography\",\"ngrx\",\"NgRxStore\",\"ReactiveX\",\"RxJS\",\"workfall\"],\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use NgRx Store in an Angular 15 Application? - The Workfall Blog","description":"How to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.","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:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/","og_locale":"en_US","og_type":"article","og_title":"How to Use NgRx Store in an Angular 15 Application? - The Workfall Blog","og_description":"How to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.","og_url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2023-01-24T11:19:40+00:00","article_modified_time":"2025-09-23T03:48:18+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/learning.workfall.com\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website","url":"https:\/\/learning.workfall.com\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png","width":1200,"height":628,"caption":"NgRx Store in an Angular 15 Application"},{"@type":"WebPage","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#webpage","url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/","name":"How to Use NgRx Store in an Angular 15 Application? - The Workfall Blog","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#primaryimage"},"datePublished":"2023-01-24T11:19:40+00:00","dateModified":"2025-09-23T03:48:18+00:00","description":"How to integrate the NgRx store into your Angular project and the major advantage of using the NgRx store in your project.","breadcrumb":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learning.workfall.com\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use NgRx Store in an Angular 15 Application?"}]},{"@type":"Article","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#article","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#webpage"},"author":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"How to Use NgRx Store in an Angular 15 Application?","datePublished":"2023-01-24T11:19:40+00:00","dateModified":"2025-09-23T03:48:18+00:00","mainEntityOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#webpage"},"wordCount":1149,"publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-ngrx-store-in-an-angular-15-application\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png","keywords":["angular","angular15","crypto","cryptography","ngrx","NgRxStore","ReactiveX","RxJS","workfall"],"articleSection":["Frontend Development"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/01\/Cover-Images_Part2-1-3.png","jetpack-related-posts":[{"id":2337,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-handle-authentication-in-angular-spas\/","url_meta":{"origin":1559,"position":0},"title":"How to Handle Authentication in Angular SPAs?","date":"May 30, 2023","format":false,"excerpt":"Angular is a good framework for creating Single Page Applications (SPAs) using JavaScript\/TypeScript. With Single Page Applications, routing is handled on the client side. This calls for protecting routes on the client side as well. Angular comes with the Angular Routing module which handles routing. Sometimes you will have protected\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Handle Authentication in Angular SPAs?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/05\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2398,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-plot-the-heatmap-charts-in-angular\/","url_meta":{"origin":1559,"position":1},"title":"How to Plot the Heatmap Charts in Angular?","date":"August 8, 2023","format":false,"excerpt":"A heatmap chart is a visual representation of data presented in a matrix format. It uses different colors to represent the magnitude of values, making it easy to identify patterns and trends within complex datasets. Warm colors depict higher values, while cooler colors indicate lower ones. This type of chart\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Plot the Heatmap Charts in Angular?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/08\/Cover-Images_Part2-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":867,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","url_meta":{"origin":1559,"position":2},"title":"Custom Pipes in Angular Framework","date":"February 2, 2022","format":false,"excerpt":"In Angular, pipes are a helpful feature. They're a quick and easy way to change values in an Angular template. A pipe accepts one or more values and then returns one or more values. Pipes can be used to display strings, currency amounts, dates, and other types of data. Pipes\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Custom Pipes in Angular Framework - Workfall","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":848,"url":"https:\/\/learning.workfall.com\/learning\/blog\/angular-vs-react-which-one-to-choose-and-when\/","url_meta":{"origin":1559,"position":3},"title":"Angular vs React: Which one to choose and when?","date":"December 30, 2021","format":false,"excerpt":"Javascript is one of the most widely used programming languages today. Many developers, both new and experienced, choose to use Javascript to construct their applications or projects, but they are sometimes perplexed while deciding which framework or library to use for their projects. Although Angular and ReactJs are their top\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Angular vs React: Which One to Choose for Your App","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/12\/Cover-Images_Part2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1402,"url":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/","url_meta":{"origin":1559,"position":4},"title":"Create & Use Standalone Components in Angular 14","date":"October 10, 2022","format":false,"excerpt":"App development is now super-simple and quicker with the new features including standalone components in Angular 14. Because of the standalone components, the use of NgModules has now become optional. The Angular developer community strives to provide web developers with better versions of the TypeScript-based framework while also allowing them\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Create & Use Standalone Components in Angular 14?","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":870,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-httpclient-in-angular\/","url_meta":{"origin":1559,"position":5},"title":"How to use HttpClient in Angular?","date":"February 8, 2022","format":false,"excerpt":"To download or upload data and access other back-end services, most front-end applications must communicate with a server using the HTTP protocol. The HttpClient service class in @angular\/common\/http provides an Angular application with an HTTP client API. The HttpClient is a lightweight, easy-to-use, and robust HTTP client library. It allows\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How To Use HttpClient in Angular - Workfall","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1559"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=1559"}],"version-history":[{"count":3,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1559\/revisions"}],"predecessor-version":[{"id":2872,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/1559\/revisions\/2872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/1560"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=1559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=1559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=1559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}