santoshyadavdev

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

export enum ActionTypes {
  Increment = '[Counter Component] Increment',
  Decrement = '[Counter Component] Decrement',
  Reset = '[Counter Component] Reset',
}

export class Increment implements Action {
  readonly type = ActionTypes.Increment;

santoshyadavdev

import { Action } from '@ngrx/store';
import { ActionTypes } from './counter.actions';

export const initialState = 0;

export function counterReducer(state = initialState, action: Action) {
  switch (action.type) {
    case ActionTypes.Increment:
      return state + 1;

santoshyadavdev

import { Component, OnInit, Injector } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-counter',
  template: '<div>Current Count: {{ count$ | async }}</div>',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent implements OnInit {

santoshyadavdev

// you can remove mat-raised-button color="" if you are not using material

// counter.increment.html
<button mat-raised-button color="primary" (click)="increment()">Increment</button>

// counter.decrement.html
<button mat-raised-button color="accent" (click)="decrement()">Decrement</button>

//counter.reset.html
<button mat-raised-button color="warn" (click)="reset()">Reset Counter</button>

santoshyadavdev

import { NgModule, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { CounterComponent } from './counter.component';
import { CounterIncrementComponent } from './counter-increment/counter-increment.component';
import { CounterDecrementComponent } from './counter-decrement/counter-decrement.component';
import { CounterResetComponent } from './counter-reset/counter-reset.component';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { createCustomElement } from '@angular/elements';

santoshyadavdev

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CounterModule , counterReducer } from 'my-counter';

@NgModule({

santoshyadavdev

import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import {
  CounterComponent, CounterIncrementComponent,
  CounterDecrementComponent, CounterResetComponent
} from 'my-counter';


@Component({
  selector: 'app-root',

santoshyadavdev

<counter-increment></counter-increment>
<counter-element></counter-element>
<counter-decrement></counter-decrement>
<counter-reset></counter-reset>

santoshyadavdev

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

santoshyadavdev

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Increment} from '../counter.actions';

@Component({
  selector: 'app-counter-increment',
  templateUrl: './counter-increment.component.html',
  styleUrls: ['./counter-increment.component.css']
})
export class CounterIncrementComponent implements OnInit {