Exercise Goal

Ouput the array of users using a custom <app-user-detail> component with the NgFor built-in structural directive.

Tasks

1. Open user-details.component.ts and declare a new user property that is a User type, and add the @Input() decorator for input binding.
2. Open user-details.component.html, and using string interpolation, output the user's firstName and lastName within an <h4> element, and the user's department within a <p> element.
3. Finally, open the app.component.html template file and insert a new <app-user-details> element, and using the NgFor built-in structural directive, iterate over the users property defined in the AppComponent class and bind to the user property on the AppUserDetails component.

Exercise

Exercise Problem

Notes

• The users array of User objects is already defined for you in the AppComponent class.
• You can apply the NgIf structural directive to the custom <app-user-details> element as well as providing the input binding. Remember, each iteration of the NgFor directive will declare a new template input variable that is unique, and which can then be binded to the user input on the custom element. Don't forget to put square brackets around the input binding to evaluate the expression, otherwise you'll just be binding the value to the string "user" rather than each template input variable from the NgFor, for example: [user]="user".
• String interpolation is performed in Angular using the double curly-brace syntax. So, to output the user's firstName string property use the following syntax in the template: {{ user.firstName }}.