- App that allows users to submit the name and url of a tutorial using a simple form and also to remove a tutorial, by using ngrx/store, RxJS-powered state management.
- Note: to open web links in a new window use: ctrl+click on link
- This app uses Ngrx Store, a RxJS-powered state management solution, to organise the app`s state. NgRX was built for Angular. NgRX is overkill for such a simple app but this is for learning purposes only.
.
- Angular v16
- RxJS Library v7 used to handle datastreams and propagation of change using observables.
- ngrx/store v16
- Run
ng servefor a dev server. - Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
- tutorial.reducer.ts file
import { Action } from '@ngrx/store';
import { Tutorial } from './../models/tutorial.model';
import * as TutorialActions from './../actions/tutorial.actions';
const initialState: Tutorial = {
name: 'Initial Tutorial',
url: 'http://google.com'
};
export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {
switch (action.type) {
case TutorialActions.ADD_TUTORIAL:
return [...state, action.payload]; // use spread operator to add action.payload to the array
case TutorialActions.REMOVE_TUTORIAL:
const currentState = [...state];
currentState.splice(action.payload, 1); // use splice to remove selected item
return currentState;
default:
return state;
}
}- Adds titles of courses and weblinks to a list array using NgRX for state management.
- Status: Working.
- To-Do: Nothing
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: `gomezbateman@yahoo´.com