Part 10: Log In page Challenge
Step 1. Challenge Create a login page
The goal for this challenge is to let you drive most of the content from what you have learned in this tutorial, as also what you know from just being a developer!
The challenge for this Module is to create the login page, which consist of:
Building the login page component with Angular CLI.
Building out the form with Angular forms in the Controller.
Building the HTML page that has the Material Form on it.
Adding a path to the Login page.
Including an onSubmit() method in the Login page component.
Injecting the Auth Service so that you can use the login() method
For this challenge give yourself 45 minutes to 1 hour before looking at the solution, yes that amount of time.
Focus on writing things from memory and the process we’ve done thus far.
The point of this challenge is to really push you, and it’s up to you to keep you accountable!
Good luck.
Step 2. Challenge Answer
If you’ve gone down the list in the previous step that is exactly how we will build the solution.
Also since everything that will be built isn’t new i’ll post just the screenshots, with minimal explanation.
Generating the component with the Angular CLI
Building out the form with Angular forms in the Controller. Also including a onSubmit method
Building the HTML page that has the Material Form on it.
Adding a path to the Login page.
Step 3. Adding RouteLink to our Header
We have some awesome buttons in our header that just aren’t being used, Let’s add functionality to them!
When we import the Route component into our application we are given an Attribute Directive, routerLink.
Think of routerLink like the anchor <a> tag element. What does the anchor tag do?
It allows us to link out to other webpages! And so does routerLink, but it only navigates to routes inside of our application.
Last updated
