{"id":19040226,"url":"https://github.com/logisticinfotech/easiest-demo-ngrx-angular6","last_synced_at":"2025-04-23T21:08:54.851Z","repository":{"id":97376338,"uuid":"139560027","full_name":"logisticinfotech/easiest-demo-ngrx-angular6","owner":"logisticinfotech","description":"Easiest demo of ngrx in angular6 with little ui state management","archived":false,"fork":false,"pushed_at":"2018-07-28T09:55:43.000Z","size":36,"stargazers_count":10,"open_issues_count":0,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T21:08:48.447Z","etag":null,"topics":["angular","angular6","demo-app","developer","ngrx","tutorial"],"latest_commit_sha":null,"homepage":"https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logisticinfotech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-03T09:28:27.000Z","updated_at":"2020-10-08T02:12:19.000Z","dependencies_parsed_at":"2023-04-14T07:31:02.418Z","dependency_job_id":null,"html_url":"https://github.com/logisticinfotech/easiest-demo-ngrx-angular6","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Feasiest-demo-ngrx-angular6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Feasiest-demo-ngrx-angular6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Feasiest-demo-ngrx-angular6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logisticinfotech%2Feasiest-demo-ngrx-angular6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logisticinfotech","download_url":"https://codeload.github.com/logisticinfotech/easiest-demo-ngrx-angular6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514786,"owners_count":21443209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular6","demo-app","developer","ngrx","tutorial"],"created_at":"2024-11-08T22:21:15.097Z","updated_at":"2025-04-23T21:08:54.836Z","avatar_url":"https://github.com/logisticinfotech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Easiest Ngrx Demo with little UI state managment like tab, input, select, radio\n\nPurpose of this demo is to understand ngrx easily. You can find step by step guide [here](https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6) to understand this demo properly. \n\n## ngrx/store configuration\n\nFirst install `@ngRx/store`\n```\nnpm install @ngrx/store --save\n\n```\n\ndefine `uiState` in ui.state.ts file\n```\nexport interface UIState {\n    ...\n    selectedTab: string;\n    ...\n}\n```\n\ndefine `uiActions` in ui.actions.ts file\n```\nimport { Action } from '@ngrx/store';\n\nexport const UIActionsTypes = {\n    ...\n    TAB_CHANGED_ACTION: '[UI] -Tab changed-',\n    ...\n};\n\n...\nexport class TabChangedAction implements Action {\n    type = UIActionsTypes.TAB_CHANGED_ACTION;\n    constructor(public payload: any) { }\n}\n...\n\nexport type UIActions =\n    | TabChangedAction;\n\n```\n\ndefine `uiReducer` in ui.reducer.ts file\n```\nimport { UIState } from './ui.state';\nimport { UIActions, UIActionsTypes } from './ui.actions';\n\nexport const appInitialState: UIState = {\n    ...\n    selectedTab: 'nav-tab1-tab',\n    ...\n};\n\nexport function uiReducer(state = appInitialState, action: UIActions): UIState {\n\n    switch (action.type) {\n\n        ...\n\n        case UIActionsTypes.TAB_CHANGED_ACTION: {\n            return Object.assign(state, {\n                ...state,\n                selectedTab: action.payload\n            });\n        }\n\n        ...\n\n        default: {\n            return state;\n        }\n    }\n}\n\n```\n\nconfigure `reducers` in app.reducer.ts file and `states` in app.state.ts\n\n```\nimport { UIState } from './UI/ui.state';\n\nexport interface AppState {\n    ui: UIState;\n}\n```\n\n```\nimport { AppState } from './app.state';\nimport { uiReducer } from './UI/ui.reducer';\n\nexport const reducers: ActionReducerMap\u003cAppState\u003e = {\n    ui: uiReducer,\n  };\n```\n\nfor configuring store in application, add following set up in your `app.module.ts` file\n```\nimport { reducers } from './store/app.reducer';\n\nimports: [\n    ...\n    StoreModule.forRoot(reducers)\n    ...\n    ]\n```\n\n## How to use in component\n\nTo access `selectedTab` property form store in your component file...\n\n```\n\nimport { Store } from '@ngrx/store';\nimport { AppState } from '../../store/app.state';\n\nexport class TabsComponent implements OnInit {\n    selectedTab: Observable\u003cstring\u003e;\n\n    constructor(private store: Store\u003cAppState\u003e) {\n        this.selectedTab = this.store.select(state =\u003e state.ui.selectedTab);\n    }\n\n    onChangeTab(id) {\n        this.store.dispatch(new TabChangedAction(id));\n    }\n}\n```\n\nin tabs.component.html\n```\n\u003ca class=\"nav-item nav-link\" [class.active]=\"(selectedTab | async) === 'nav-tab1-tab'\" id=\"nav-tab1-tab\" data-toggle=\"tab\" href=\"#nav-tab1\" role=\"tab\" aria-controls=\"nav-tab1\" aria-selected=\"true\" (click)=\"onChangeTab('nav-tab1-tab')\"\u003eTab 1\u003c/a\u003e\n```\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n\n## Further help\n\nCheckout full blog [here](https://www.logisticinfotech.com/blog/easiest-demo-to-learn-ngrx-in-angular-6).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogisticinfotech%2Feasiest-demo-ngrx-angular6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogisticinfotech%2Feasiest-demo-ngrx-angular6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogisticinfotech%2Feasiest-demo-ngrx-angular6/lists"}