Scribd
Upload
10 views5 pages

Angular Assigment With NGRX

Angular Assignment with NgRx implementation

Uploaded by

shivam9131363438
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views5 pages

Angular Assigment With NGRX

Angular Assignment with NgRx implementation

Uploaded by

shivam9131363438
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Create a Basic Form and Folder Structure (With NgRx Integration)

Objective:

Learn to set up an Angular project with a proper folder structure,


implement state management using NgRx, and create a basic form with
user input handling and backend integration.

Assignment Details:

Part 1: Project Setup and Folder Structure

1. Create a New Angular Project:

o Create a new Angular project using the Angular CLI:

ng new AngularFormAssignment

2. Set Up NgRx:

o Install NgRx dependencies:

ng add @ngrx/store

npm install @ngrx/effects @ngrx/store-devtools


@ngrx/entity @ngrx/router-store

o Create a feature store folder structure inside the src/app

directory:
3. Set Up a .NET Web API Backend:

o Create a new .NET Web API project:

dotnet new webapi -n UserRegistrationAPI

o Configure the API to handle CORS for integration with the


Angular frontend.

o Create the following backend folder structure:

Controllers: Contains API controllers (e.g., UserController.cs)

Models: Contains classes representing data models (e.g., User.cs)

Services: Contains service logic for business rules and data


handling

Part 2: Create a User Registration Form

1. Frontend Form Component:

o In the form.component.html, create a form with the following


fields:

 Full Name

 Email

 Password

 Confirm Password

2. Angular Validation Rules:

o Implement validation:

 All fields are required.


 Email must be in a valid format.

 Password and Confirm Password must match.

o Display validation error messages beneath each field when


invalid.

3. State Management with NgRx:

o Actions:
Define actions for:

 Capturing user input (SetUserDetailsAction).

 Validating form data (ValidateFormAction).

 Submitting form data to the backend


(SubmitUserDetailsAction).

o Reducer:
Create a reducer to handle user input and manage form
submission state (loading, success, error).

o Selectors:
Create selectors to query form state, such as:

 Retrieving current form values.

 Checking form validation errors.

 Monitoring submission status.

o Effects:

 Implement an effect to handle form submission to the


backend using HttpClient.

 Dispatch success or failure actions based on the API


response.

4. Backend API for User Registration:

o Create a POST API endpoint to accept user details.

o Define a User model with properties for Full Name, Email, and
Password.

o Save user details temporarily in memory using a service or


static storage.

Part 3: Submit Form


1. Frontend Submission with NgRx:

o On form submission, dispatch an SubmitUserDetailsAction


with the user data.

o Use an effect to:

 Send the user details to the .NET Web API backend.

 Log the response or handle errors using NgRx state.

2. Backend Validation:

o Validate incoming data in the API.

o Return appropriate responses (success or validation errors).

3. Success Feedback:

o Display a success message upon successful form submission.

o Show error messages if the backend responds with validation


errors.

4. Reset Functionality:

o Implement an action to reset the form state


(ResetFormAction).

Expected Features:

 NgRx State Management:

o Actions, Reducers, Selectors, and Effects implemented for


form handling.

o State-driven UI updates based on validation and submission


status.

 Properly Organized Folder Structure:

o Well-organized feature modules and NgRx-specific files.

 Functional and Validated User Registration Form:

o Error messages displayed for invalid fields.

o Success message displayed on form submission.

 Simulated Backend with .NET Web API.


Bonus Challenge:

 Implement a loading spinner while submitting the form using NgRx


state.

 Store and display a list of registered users using NgRx selectors.

 Style the form using CSS to improve its appearance.

Deliverables:

1. Angular Project Folder:

o The complete Angular project folder with NgRx integration.

2. Screenshots:

o Validation errors displayed in the form.

o Success message upon submission.

3. Challenges Faced:

o Brief description of challenges encountered while using NgRx.

You might also like