The Login Page

v.18

v.18

Fabio Biondi
Google Expert | Angular
# Create the Login page
We now create the Login page:
Export the component as default
:
features/login/login.component.ts
Add the router rules to app.routes
:
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
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 username
and password
, with basic validation ensuring both fields are filled before submission.
-
The LoginComponent
uses Angular's FormBuilder
to 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).
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!