Categories

Tuesday, October 4, 2022
+919814419350 therichposts@gmail.com
Angular 14NGRX

Angular 14 NGRX COUNTER Working Example

Angular 14 NGRX COUNTER Working Example
684

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

Working Demi

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

Angular 14 NGRX COUNTER Working Example
Angular 14 NGRX COUNTER Working Example

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

therichpost
the authortherichpost
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 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

2 Comments

Leave a Reply

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