NGRX Fundamentals
Build a Shopping Cart
Reserved Area
# Create the Login page
We now create the Login page:
terminal
Export the component as
default:
features/login/login.component.ts
Add the router rules to
app.routes:app.routes.ts
The page is now visible at the following url:
# Update Navbar
We add two buttons to the Navigation Bar to access both the
/login and the /cms routes:core/components/nav-bar.component.ts
Full source code
Expand to see the updated source code of NavBarComponent
Full source code
Expand to see the updated source code of NavBarComponent
core/components/nav-bar.component.ts
# Login Page
In this section, we create a simple login form using Angular's Reactive Forms.
-
The form collects a
usernameandpassword, with basic validation ensuring both fields are filled before submission. -
The
LoginComponentuses Angular'sFormBuilderto construct the form. -
When the login button is clicked, the form data is logged to the console.
Here is the full source code of the Login Page:
features/login/login.component.ts
username and password are keys in the form group, each mapped to a FormControl instance with an empty initial value and a required validator.These keys are then used in the HTML template to associate each input field with its own form control (using the
formControlName directive).
