1 00:00:00,870 --> 00:00:01,990 Hello again, everyone. 2 00:00:02,280 --> 00:00:06,610 So we created the model classes and the components that we're going to be using in our project. 3 00:00:06,630 --> 00:00:13,680 Now we're going to start using the data binding features that we talked about, oh, not too long ago. 4 00:00:15,380 --> 00:00:19,880 So, as you know, we talked about two different methods, one way binding and two way binding. 5 00:00:21,970 --> 00:00:30,850 So we basically provide to the template and information flow from component to template with string 6 00:00:30,850 --> 00:00:33,700 interpolation and property binding, right. 7 00:00:34,390 --> 00:00:39,640 So we pass a template change to component with event binding. 8 00:00:40,600 --> 00:00:47,380 Now, it could be just a click of a button or it can be something entered into an input field. 9 00:00:48,520 --> 00:00:53,630 But anyway, two way binding is a combination of event binding and property binding. 10 00:00:54,340 --> 00:00:59,130 So here we're going to talk about bilateral information, interaction, what? 11 00:00:59,500 --> 00:01:04,380 Yeah, bilateral information, interaction to ensure. 12 00:01:05,460 --> 00:01:10,440 You're going to keep this information in your head, but I want to build them into the project. 13 00:01:10,470 --> 00:01:10,790 All right. 14 00:01:11,310 --> 00:01:14,480 So let's first use the poverty binding method. 15 00:01:15,330 --> 00:01:19,650 So for this, we're going to create a method in the repository model class. 16 00:01:22,490 --> 00:01:26,060 So this method will give us the idea of our book. 17 00:01:27,450 --> 00:01:35,070 And using the find method will find the idea of this list of books and then we can check to see if it 18 00:01:35,070 --> 00:01:37,470 is equal to the incoming ID. 19 00:01:39,340 --> 00:01:46,720 So this method will return information about this book to us with the incoming I.D. parameter. 20 00:02:01,980 --> 00:02:05,610 And now I can use this information in the component. 21 00:02:07,490 --> 00:02:10,370 And now I'll define a book type variable. 22 00:02:22,920 --> 00:02:24,630 I'm sending its ID here. 23 00:02:31,590 --> 00:02:39,910 Now, here we can use the incoming book information on the HTML page, so I'll create a div on the female 24 00:02:39,930 --> 00:02:49,230 page and in my div I'll use the name of the book and we will print using the text content property with 25 00:02:49,230 --> 00:02:50,580 the H3 element. 26 00:02:56,890 --> 00:02:58,840 So in using the property binding. 27 00:03:00,040 --> 00:03:07,030 We were inclosing square brackets than we write equal and we write the value between double quotes, 28 00:03:07,960 --> 00:03:12,910 actually, as you know, we can achieve the same result just by using string interpolation. 29 00:03:14,220 --> 00:03:21,180 So here, let's just write out an example of string interpolation during, yeah, using double braces 30 00:03:21,180 --> 00:03:21,740 right here. 31 00:03:23,800 --> 00:03:29,320 So now when we check the changes in the browser, we see that the name of the book is written in two 32 00:03:29,320 --> 00:03:29,980 different ways. 33 00:03:37,860 --> 00:03:44,910 Now, I want you to be careful about this particular point, a dumb object is created when the HTML 34 00:03:44,910 --> 00:03:48,300 page is loaded in the browser, right. 35 00:03:48,520 --> 00:03:51,420 And this object has an attribute just like this. 36 00:03:52,420 --> 00:03:55,330 And we can equalize a value from this attribute. 37 00:03:56,690 --> 00:04:03,920 And later, we'll talk about how to value a dumb object that does not have this attribute, but right 38 00:04:03,920 --> 00:04:06,860 now we're using the existing features. 39 00:04:08,700 --> 00:04:15,180 Right, my friend, so that is the property binding method in use, we're going to talk about class 40 00:04:15,180 --> 00:04:16,790 binding and our next lesson. 41 00:04:17,580 --> 00:04:18,330 So I'll see you then. 42 00:04:18,340 --> 00:04:18,990 Bye for now.