Angular 14 NGRX COUNTER Working Example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 14 NGRX COUNTER Working Example.

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

Guys here is the code snippet and please use this carefuly:

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

Also you have latest nodejs installed on your system

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

ng new angularngrx //Install New Angular App

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

cd angularngrx //Go inside the Angular 14 Project

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

I use mostly use bootstrap to make application looks good

npm install bootstrap

npm i @popperjs/core     

ng add @ngrx/store@latest

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;

//Creates a reducer function to handle state transitions.

//Reducer creators reduce the explicitness of reducer functions with switch statements.
export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1),
  on(reset, (state) => 0)
);

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

ng g c my-counter

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { MyCounterComponent } from './my-counter/my-counter.component';

@NgModule({
  declarations: [
    AppComponent,
    MyCounterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({ count: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from '../counter.actions';

@Component({
  selector: 'app-my-counter',
  templateUrl: './my-counter.component.html',
})
export class MyCounterComponent {
  count$: Observable<number>;

  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.select('count');
  }

  //Implement the increment, decrement, and reset methods by dispatching actions to the store.
  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

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

<div class="container p-5 text-center">
   
    <button class="btn btn-primary mb-3" (click)="increment()">Increment</button>

    <div class="mb-3">Current Count: <strong>{{ count$ | async }}</strong></div>

    <button class="btn btn-primary me-2" (click)="decrement()">Decrement</button>

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

10. Now add below code into your src/app/app-component.html file:

<app-my-counter></app-my-counter>

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.

Note:

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

Jassa

Thanks