Login Page Challenge

Summary

In the previous challenge, we used data binding to display content in the view. In this challenge, we’ll employ two-way binding to get information from a form and display it. Using [(ngModel)] from User Input Lesson try to create the below login page.

Requirements

Start off with a Stackblitz Angular project.

  • Must have a Login Component

  • The login component must have a div that contains two inputs and a button.

  • Use Flexbox to align the items with in the div

  • Must use [(ngModel)] on each input and bind each to a user object with the properties email and password

  • The inputs should utilize two-way binding to communicate data from the view to the controller.

  • For the login button, create an event that alerts the value of the Email and Password fields.

  • The layout should look as close to the picture above as possible. Inspect every detail (border, color, text, bgcolor, etc.)

Tips/Hints

  • Use event binding to add functionality to your button

  • Make sure the forms module is imported in app.module.ts

  • Add styling and use CSS properties to style the elements on the page

Bonus Work

  • Covert the palindrome app we made before into an angular app.

Helpful Past Lessons

PreviousUser Input with - [(ngModel)]NextRouting

Last updated