- On this page, find the green button that says "Code". Click it and download the ZIP file.
- Unzip the folder and open in VSCode
- Open a terminal at this folder and run
npm install
to download the node_modules dependencies. - Code!
- Download staring code for class 10 Angular Example
- In the app.component.html file, create a container div with a row inside that renders both of our components side-by-side.
- Inside the "BookFormTemplateComponent": Create a template-driven form that, when submitted, displays all the relevant data below the form.
- Title, Author, and Genre should all be required inputs that display an error message with a red border when touched and invalid.
- Set 'mystery' to be the default value on the genre select box.
- Use two-way-binding to display the name of the book after the word "Submit" on the submit button.
- Display the title, author, and genre below the form when a user clicks "Submit". (Also, reset the form.)
- Inside the "BookFormReactiveComponent": Create a reactive-driven form that, when submitted, displays all the relevant data below the form.
- Title, Author, and Genre should all be required inputs that display an error message with a red border when touched and invalid.
- Set 'mystery' to be the default value on the genre select box.
- Display the title, author, and genre below the form when a user clicks "Submit". (Also, reset the form.)
- Publish to Github. Inside the README.md file, write your experience of the different approaches.
- Define the "Template-Driven-Approach" and the "Reactive-Driven-Approach".
- Explain their differences and what each excel at doing.
- Write about what you find easy and what is challenging about each.
- On this page in github, on the same line as the "code" button but on the left side... you should see a dropdown with the text "Starting-Code".
- Click the dropdown and select "Final-Project".
- You should now be able to view the files of the finished project.