Categories

Sunday, February 5, 2023
+919814419350 therichposts@gmail.com
Angular 15NGRX

Angular 15 NGRX COUNTER Working Example

Angular 15 NGRX COUNTER Working Example
802

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

Working Demo

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

Angular 15 NGRX COUNTER Working Example
Angular 15 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 15 fresh setup:

Also you have latest nodejs installed on your system

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

ng new angularngrx //Install New Angular App

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

cd angularngrx //Go inside the Angular 15 Project

2. Now run below commands into your terminal to get ngrx and bootstrap modules into your angular 15 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",
  
],

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 15.

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

Leave a Reply

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