Bind form inputs to yyour component model and class variables.
- [Instructor] To get the data or values…from our two input boxes,…we could use something called a Form Builder…with reactive forms,…which is a good choice in this case,…but I'm going to keep it simple…with individual data binding.…This is so that you can learn multiple ways…of achieving something similar.…We will take a look at reactive forms…and the Form Builder, in a later chapter.…Back in our new-message-component,…let's begin by creating an owner field…in our new message class.…So we'll do that below the constructor,…and we'll set it to a value of test.…
Next, inside our input element on line 10,…let's add a value property,…and we'll set it to our new owner class property,…and we'll wrap that in double curly braces.…Let's save that up and then take a look at our page.…After the automatic refresh, we should see our test value…inside the name input,…but this is not yet two-way data binding.…Meaning that if I type something else in the name input…instead of test, our name field…will change it's value as well,…and that is not yet happening.…
Author
Alexander Zanfir
Updated
10/17/2017Released
5/16/2017- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Duration
Views
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.
-
Introduction
-
Welcome1m 7s
-
Using the exercise files1m 32s
-
-
1. Setting Up the Infrastructure
-
Demo application overview1m 10s
-
-
2. Displaying Data in Angular 2
-
Creating the component6m 24s
-
Show our data3m 22s
-
-
3. Getting Your Data from Node
-
Set up express3m 10s
-
Create a service2m 42s
-
-
4. Saving Your Data to Node
-
Create a post service3m 39s
-
Save data to a list1m 20s
-
Creating an express router2m 54s
-
-
5. Creating a Form in Angular
-
Create the component6m 33s
-
Get our input data5m 17s
-
-
6. Navigating with Router
-
Create a nav bar2m 44s
-
Set up routes4m 10s
-
Add a messages route2m 49s
-
Pass a route parameter3m 40s
-
Retrieve a route parameter1m 17s
-
-
7. Reactive Programming
-
HTTP get with Observable6m 14s
-
Broadcast with subject2m 43s
-
-
8. Creating Reactive Forms in Angular
-
Create a register layout5m 29s
-
Validate with reactive forms7m 21s
-
-
9. Registering Users
-
Store a token with Angular1m 43s
-
Log out2m 45s
-
10. Logging In
-
Create the login services6m 47s
-
11. Authorizing Resources
-
Edit user Info7m 45s
-
Update message posting1m 26s
-
Conclusion
-
Next steps18s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Get our input data