Angular 10Bootstrap 4.5Javascript

Angular 10 NGRX Share Data Between Components

Angular 9, Angular 10

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 NGRX Share Data Between Components.

Angular 10 ngrx store sharing data between components

Angular 10 came and if you are new then please check below links:

Angular 10 Basic Tutorials

Angular 10 for beginners


Here is the code snippet for Angular 10 ngrx store share data between components:

1. Very first, you need run below commands into your terminal to get angular 10 fresh setup:

Also you have latest nodejs installed on your system

npm install -g @angular/cli //Setup Angular10 atmosphere

ng new angularngrx //Install New Angular App

/**You need to update your Nodejs also for this verison**/

cd angularngrx //Go inside the Angular 10 Project

 

2. Now run below commands into your terminal to get ngrx and bootstrap modules into your angular 10 application:

I use mostly use bootstrap to make application looks good

npm install bootstrap --save

npm install @ngrx/store --save

 

3. Now add below code into your angular.json file:

"styles": [
  ...
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  
],
"scripts": [
  ...
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  
]

 

4. Now you have to create counter.actions.ts file inside src/app folder and add below code into that file:

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');

 

5. Now create counter.reducer.ts file inside src/app folder and add below code into that file:

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1),
  on(reset, state => 0),
);

export function counterReducer(state:any, action:any) {
  return _counterReducer(state, action);
}

 

6. Now run below command into your terminal to create new component:

ng g c componentsecond

 

7. Now add below code into your src/app/app.module.ts file:

...
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
  { path: 'secondcomponent', component: ComponentsecondComponent }
];
...
imports: [
   ...
   StoreModule.forRoot({ count: counterReducer }),
    RouterModule.forRoot(
      appRoutes,
     { enableTracing: true } // <-- debugging purposes only
    ) 
  ],

 

8. Now add below code into src/app/app/component.ts file:

...
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from './counter.actions';
...
export class AppComponent {
...
count$: Observable<number>; 
constructor( private store: Store<{ count: number }>){
    this.count$ = store.pipe(select('count'));
  }
increment() {
    this.store.dispatch(increment());
  }
 
  decrement() {
    this.store.dispatch(decrement());
  }
 
  reset() {
    this.store.dispatch(reset());
  }
}

 

9. Now add below into src/app/app.component.html file:

<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/']">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/secondcomponent']">Second Component</a>
    </li>
  </ul>

</nav>
<div class="container text-center">
  <h1 class="mt-5 mb-5">Angular 10 NGRX Working Example with multiple Components</h1>

  <button class="btn btn-primary mb-5 mt-5" id="increment" (click)="increment()">Increment</button>

   <div>Current Count: {{ count$ | async }}</div>

   <button class="btn btn-primary mb-5 mt-5 mr-5" id="decrement" (click)="decrement()">Decrement</button>

   <button class="btn btn-primary" id="reset" (click)="reset()">Reset Counter</button>

<router-outlet></router-outlet>
</div>

 

10. Now add below into your src/app/componentsecond/componentsecond.component.ts file:

...
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

export class ComponentsecondComponent implements OnInit {
  ...
  count$: Observable<number>; 
  constructor( private store: Store<{ count: number }>) { this.count$ = store.pipe(select('count')); }

  

}

 

11. Finally add below into your src/app/componentsecond/componentsecond.component.html file:

<div>Current Count: {{ count$ | async }}</div>

 

This is it and don’t forget to run ng serve command in the end. If you have any kind of query then please do comment below.

Angular ngrx store data sharing
Angular ngrx store data sharing

Note:

The main purpose of this pot is to tell you, how to easily share data between components in angular 10.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.