Exercise Goal

Create an appFocus directive that applies the focus to an input element.

Tasks

Before you get started with the tasks in this exercise, open the Exercise Problem below. Once the application is running you will notice that the application currently consists of just a login form. The login form requires that the user enter their email address first, then click "Next", and then enter their password, and finally click "Login".

This login form is (IMHO) beautiful and has some very nice animations. One improvement that we could make to the user experience is to focus on the email <input> field first, and then after the user has entered their email (and goes on to the next step of the form), to then focus on the password <input> field.

Finally, note that the code in the focus() method in the FocusDirective class is commented out. This is to prevent the email input from grabbing your cursor (focus) everytime the application hot reloads while working on this exercise. To test out your solution, be sure to uncomment this code.

1. Open the focus.directive.ts file and add a new appFocus input that is typed boolean.
2. Uncomment the code in the focus() method.
3. Open the login.component.html template and add the appInput input binding to each <input> form element. The input binding is an expression, so we'll want to evaluate that expression. So, rather than simply applying the attribute we need to surround the attribute with square brackets: [appInput]="expression". In the place of the expression we want to evaluate the step that the form is on. The first step (0) is when the user has not entered anything. The second step (1) is when the user has entered an email address. Therefore, the expression for the email input binding should evaluate if the user is currently on the first step: step === 0. Finally, the expression for the password input binding should evaluate if the user is currently on the second step: step === 1.

Exercise

Exercise Problem

Notes

• You may want to study some of the code in the login.component.ts file first. This includes a private step instance property that is incremented when the user continues to the next step in the form via the onNext() method.
• For fun, you might also be interested in studying the animation. While this course does not cover animations, you might be interested to see how the animation works.