1
00:00:00,180 --> 00:00:02,070
Hello, everyone, again, so.

2
00:00:03,780 --> 00:00:09,060
We talked about using string interpolation in the last lesson, so in this lesson, we're going to talk

3
00:00:09,060 --> 00:00:10,290
about property binding.

4
00:00:10,830 --> 00:00:17,540
In fact, we could technically say that string interpolation and property binding are one and the same.

5
00:00:18,000 --> 00:00:22,030
Therefore, their usage is pretty similar to each other.

6
00:00:22,050 --> 00:00:22,380
Right.

7
00:00:24,020 --> 00:00:31,730
It's now already we'll see that, as we mentioned, we can change the property of a view element with

8
00:00:31,730 --> 00:00:40,100
property binding, and we can do this with one way communication from typescript to HD mil, just as

9
00:00:40,100 --> 00:00:41,420
in string interpolation.

10
00:00:42,730 --> 00:00:50,310
Now, to understand this method a little easier, let's let's change a button to be active or inactive,

11
00:00:50,950 --> 00:00:55,860
for example, will add a button on the HTML page of this component.

12
00:00:55,870 --> 00:01:02,440
And with this button, we can add a remove a new product, we'll say, or we could always use it for

13
00:01:03,100 --> 00:01:04,180
some other process.

14
00:01:04,180 --> 00:01:07,510
But the important thing here is how to use this method.

15
00:01:07,600 --> 00:01:08,050
So.

16
00:01:11,410 --> 00:01:14,140
Now we'll add a button where we can add products.

17
00:01:19,910 --> 00:01:23,690
And yeah, so we can switch to the typescript file.

18
00:01:24,670 --> 00:01:27,370
So now let's have a look and see what's happening in the browser.

19
00:01:36,530 --> 00:01:40,190
So the newly added button is here, it seems active.

20
00:01:42,550 --> 00:01:45,970
And here, I'll want to make this button passive.

21
00:01:51,180 --> 00:01:58,320
So one of the easiest ways to do that would be to use the disabled attribute for the button in HTML.

22
00:01:59,590 --> 00:02:09,550
And look at now that I'll use it in HTML in the file here and the button is disable, but there might

23
00:02:09,550 --> 00:02:10,180
be a problem.

24
00:02:11,850 --> 00:02:16,830
So when I wanted to be passive, I'll have to come back and change from here.

25
00:02:17,400 --> 00:02:24,630
Well, not exactly the most efficient way to do it, but what we want to do is provide this control

26
00:02:24,630 --> 00:02:26,750
over the typescript file.

27
00:02:27,390 --> 00:02:30,500
And here we can talk about some of the properties.

28
00:02:31,740 --> 00:02:35,520
So now I want to show you some of the few important things that we'll need to know.

29
00:02:35,520 --> 00:02:38,980
Attributes and properties are not the same, right?

30
00:02:38,980 --> 00:02:39,470
You follow.

31
00:02:40,380 --> 00:02:44,730
So attributes are used in HTML and properties are used in Dom.

32
00:02:46,670 --> 00:02:49,190
So attributes initialise domme properties.

33
00:02:50,710 --> 00:02:51,260
Gotcha.

34
00:02:51,890 --> 00:02:59,780
Right, so let me say that again, attributes initialised some properties, attributes are used in HTML

35
00:03:00,290 --> 00:03:07,600
properties and dom so attributes initialise dom properties and then they are done.

36
00:03:08,300 --> 00:03:13,430
So initial values of attributes do not change, but the properties can change.

37
00:03:14,450 --> 00:03:18,280
So let's have a look at using properties to see this distinction.

38
00:03:19,690 --> 00:03:23,800
It's not just define a new boolean value in the typescript file.

39
00:03:31,000 --> 00:03:38,680
And all right, false as the initial value and in order to use this feature in the Gmail file, I just

40
00:03:38,680 --> 00:03:41,530
have to use it and I'll just put it in square brackets.

41
00:03:41,530 --> 00:03:41,790
Right.

42
00:03:43,020 --> 00:03:50,970
And that's the way they will specify that this expression we use is an angular prop., not HTML attribute.

43
00:03:52,730 --> 00:03:57,350
And then I should state the value of this feature just like this.

44
00:03:58,280 --> 00:04:08,510
And see, now we've made the property definition, so now we can manage this button in the typescript

45
00:04:08,510 --> 00:04:09,280
file.

46
00:04:10,540 --> 00:04:16,600
So when I make it through the button, I'll be active and actually we can develop this a little bit

47
00:04:16,600 --> 00:04:18,640
further by writing a function.

48
00:04:19,980 --> 00:04:23,010
So I want to change this button state dynamically.

49
00:04:26,380 --> 00:04:30,100
And prepare this function in constructor.

50
00:04:40,390 --> 00:04:45,370
And I want to boolean variable value to change in four seconds, OK?

51
00:04:52,680 --> 00:04:59,070
So in other words, our button will change dynamically and without any intervention, so we realize

52
00:04:59,070 --> 00:05:02,040
this function by binding the property HTML file.

53
00:05:02,070 --> 00:05:04,200
Are we prepared in the typescript file?

54
00:05:04,920 --> 00:05:08,100
And now we can easily see it in the browser.

55
00:05:10,730 --> 00:05:13,470
And we also learn how to use property binding, right?

56
00:05:14,360 --> 00:05:22,280
So before we finish up here, I do want to talk a little bit about this idea of string interpolation

57
00:05:22,280 --> 00:05:23,510
and property binding.

58
00:05:24,150 --> 00:05:30,440
Like I said at the beginning of the lesson, we can actually use these two communication methods interchangeably

59
00:05:30,710 --> 00:05:32,210
in many places.

60
00:05:33,150 --> 00:05:39,360
So now let me show you another example, so we've just prepared this boolean variable for the property

61
00:05:39,360 --> 00:05:41,820
binding, but now.

62
00:05:43,550 --> 00:05:49,010
I'm going to use it as string interpolation for output, so look at this.

63
00:05:57,010 --> 00:06:02,200
When you do it this way, it shows us the boolean value as a result.

64
00:06:12,800 --> 00:06:19,250
All right, so now just prepare a while, the same thing with property binding.

65
00:06:29,230 --> 00:06:31,200
And again, we get the same result.

66
00:06:36,540 --> 00:06:43,620
See, so that's exactly what I meant, so we've used the variable here for both string interpolation

67
00:06:43,890 --> 00:06:45,300
and property binding.

68
00:06:46,140 --> 00:06:48,840
And look at the result, it's the same.

69
00:06:50,170 --> 00:06:55,160
So the important thing here is to know when to use string interpolation and when to use property binding.

70
00:06:56,140 --> 00:06:58,030
So here's my suggestion for you.

71
00:06:58,930 --> 00:07:05,580
If you're going to get an output or text, print your template, then you would prefer string interpolation.

72
00:07:06,190 --> 00:07:12,490
And if you want to change a property, for example, and HTML property, just like we've done here,

73
00:07:12,490 --> 00:07:14,920
then property binding will be your preference.

74
00:07:14,980 --> 00:07:15,420
All right.

75
00:07:15,430 --> 00:07:16,690
So don't think about it.

76
00:07:16,690 --> 00:07:17,290
Too much of it.

77
00:07:17,320 --> 00:07:18,950
Still a little fuzzy.

78
00:07:18,970 --> 00:07:21,690
We're going to get into this situation frequently throughout the course.

79
00:07:22,920 --> 00:07:29,490
And finally, I don't want you to confuse the writing formats of these two communication methods, we're

80
00:07:29,490 --> 00:07:37,290
making an HTML property definition for property binding, so we need to pay attention to this in square

81
00:07:37,290 --> 00:07:41,220
brackets and double quotation marks right here.

82
00:07:41,520 --> 00:07:41,760
Right.

83
00:07:42,150 --> 00:07:46,950
So remember to use double curly brackets and string interpolation.

84
00:07:48,470 --> 00:07:50,750
I think that's enough for now, see in the next lesson.