Angular - 2.20-Exercise 2
You have learned a lot about Angular data binding. It is now time to put those skills into practice. In this exercise, you will combine the different forms of data binding to assemble a small interactive component. Pause the video, attempt the exercise on your own, then come back to compare with the proposed solution.
Here is one possible solution. We start by adding a horizontal rule for visual separation, then an input field styled with the Bootstrap class form-control so the user can enter a username. Optionally, we can wrap it in a Bootstrap container and a row with class="col-xs-12" for nicer spacing - this is purely cosmetic. In the TypeScript class we declare a new property username = '' which will hold the value entered by the user.
Wiring the binding
<input class="form-control" [(ngModel)]="username">creates a two-way binding to the property.FormsModulemust be imported in theAppModuleforngModelto work - it is the home of the directive.- Below the input we add
<p>{{ username }}</p>so the value is mirrored as soon as the user types.
The next task is to add a "Reset user" button below the paragraph, styled with btn btn-primary. The button must be disabled when the input is empty. We achieve that with property binding: <button [disabled]="username === ''" (click)="onResetUsername()">Reset user</button>. Notice that [disabled] uses square brackets because it is a property binding, while (click) uses parentheses because it is an event binding.
In the component class we add the handler onResetUsername() { this.username = ''; }. Now type "supermax" in the input: the paragraph reflects the value instantly and the button becomes enabled. Click "Reset user" and both the input and the paragraph empty out, while the button becomes disabled again. This little exercise demonstrates that [(ngModel)], [disabled], (click) and {{ }} are all complementary tools - mastering them is the foundation for building any interactive Angular form.
Summary
Exercise 2 is an introduction to a practical Angular project where learners will build a comprehensive recipe book and shopping list application. The lesson emphasizes the importance of planning the application structure and identifying required components before implementing the features. This exercise integrates multiple Angular concepts previously learned to create a real-world application.
Key points
- Exercise 2 involves building an integrated recipe book and shopping list application
- Practice previously learned Angular features in a real project context
- Recipe management includes detailed views and ingredient management
- Shopping list functionality with ability to add ingredients directly from recipes
- Planning application structure and component architecture is the critical first step
- Multiple sections require thoughtful component design and organization
FAQ
What is the main goal of Exercise 2?
To build a complete recipe book and shopping list application that combines multiple Angular features learned in previous sections. The application allows users to manage recipes with detailed views and maintain a shopping list that can be populated with ingredients from recipes.
What are the key features of the recipe and shopping list application?
The application includes a recipe section where recipes can be displayed and managed with detailed views, a shopping list section for managing items to purchase, and the ability to add recipe ingredients directly to the shopping list.
Why is planning the component structure important before coding?
Planning the structure and components before implementation ensures the application is properly organized, supports all required functionalities, and makes development more efficient. This foundational step helps identify what components are needed for different features.