1 00:00:00,150 --> 00:00:06,360 In this section, we're going to dedicate our time to learning the features revolving around components. 2 00:00:06,660 --> 00:00:09,570 It's one of the most powerful features in angular. 3 00:00:09,870 --> 00:00:14,940 Furthermore, we will be working with components a majority of the time in this course. 4 00:00:15,210 --> 00:00:18,450 As a result, there are a lot of features to unpack. 5 00:00:18,690 --> 00:00:22,170 To begin, we're going to focus on interpolation. 6 00:00:22,680 --> 00:00:24,900 Angular loves its terminology. 7 00:00:25,170 --> 00:00:28,860 Words like interpolation and expressions come up frequently. 8 00:00:29,040 --> 00:00:31,680 Here's a quick refresher on expressions. 9 00:00:32,130 --> 00:00:38,280 A JavaScript expression is a single line of code that can be evaluated to a single value. 10 00:00:38,580 --> 00:00:42,390 The value can be a no string or logical value. 11 00:00:42,630 --> 00:00:45,000 There are all kinds of expressions. 12 00:00:45,480 --> 00:00:46,950 Here are some examples. 13 00:00:47,190 --> 00:00:54,510 Arithmetic operations, basic string manipulation and logical comparisons are considered expressions. 14 00:00:54,840 --> 00:01:00,630 All three examples will evaluate to a single value to add more clarity. 15 00:01:00,750 --> 00:01:04,200 Here are some examples that aren't considered expressions. 16 00:01:04,560 --> 00:01:10,980 Variable declarations, conditional statements and function declarations are not expressions. 17 00:01:11,550 --> 00:01:15,030 We can add expressions directly inside a template. 18 00:01:15,330 --> 00:01:17,640 The process goes something like this. 19 00:01:18,270 --> 00:01:25,020 Angular will search through our templates for expressions, and expression can be inserted into a template 20 00:01:25,020 --> 00:01:29,250 by writing two pairs of curly braces with the expressions inside. 21 00:01:29,730 --> 00:01:32,190 The expression can be whatever we want. 22 00:01:32,760 --> 00:01:34,650 It'll process the expression. 23 00:01:35,070 --> 00:01:41,940 Whatever gets evaluated will be output ID on the template by replacing the curly braces with the evaluated 24 00:01:41,940 --> 00:01:42,600 value. 25 00:01:42,960 --> 00:01:46,440 Angular handles the majority of this process for us. 26 00:01:47,040 --> 00:01:51,720 Another word for describing this process is called string interpolation. 27 00:01:52,170 --> 00:01:57,330 These two phrases can be interchangeable at times, but there is a difference between them. 28 00:01:57,690 --> 00:02:04,650 Expressions are the code inside the curly braces, whereas string interpolation describes the process 29 00:02:04,650 --> 00:02:07,950 of replacing a placeholder with a string value. 30 00:02:08,639 --> 00:02:13,890 Therefore, you can say the expression name is interpolated into John. 31 00:02:14,220 --> 00:02:16,320 The terminology can be confusing. 32 00:02:16,320 --> 00:02:20,340 Sometimes developers will throw around both words. 33 00:02:20,640 --> 00:02:24,360 It's important to know what they mean when they use these terms. 34 00:02:25,600 --> 00:02:26,920 Enough terminology. 35 00:02:27,100 --> 00:02:29,650 Let's put what we've learned into practice. 36 00:02:29,890 --> 00:02:34,990 We will continue working on the basics project we created in the last section. 37 00:02:35,350 --> 00:02:38,860 Open the app component tips file. 38 00:02:41,400 --> 00:02:46,620 Inside the class, let's create a property called name with a random value. 39 00:02:49,340 --> 00:02:51,230 Our component can store data. 40 00:02:51,650 --> 00:02:56,000 The data we store in a component will be isolated from other components. 41 00:02:56,390 --> 00:03:02,090 If we are using these same component multiple times, they'll each have a property called name. 42 00:03:02,510 --> 00:03:08,600 If this property changes in one component, the changes won't be reflected in other components. 43 00:03:09,170 --> 00:03:11,840 Let's try rendering the name in the templates. 44 00:03:12,140 --> 00:03:16,640 Switch over to the app component dot html file. 45 00:03:19,280 --> 00:03:26,300 In between the paragraph tags, we will replace these static text to output the name property, the 46 00:03:26,300 --> 00:03:30,410 name of the property must be wrapped with double curly braces. 47 00:03:32,990 --> 00:03:36,230 A couple of things worth mentioning about this syntax. 48 00:03:36,530 --> 00:03:40,790 The curly braces help angular identify where writing and expression. 49 00:03:41,150 --> 00:03:44,000 We can't simply write their property in the template. 50 00:03:44,300 --> 00:03:48,980 Otherwise, angular will interpret this expression as static text. 51 00:03:49,460 --> 00:03:53,870 Secondly, we are writing the property name without the this keyword. 52 00:03:54,110 --> 00:03:55,640 We don't need to include it. 53 00:03:55,940 --> 00:04:00,170 Angular is smart enough to know where to find the property in the class. 54 00:04:00,500 --> 00:04:04,790 It'll establish a connection for us, which makes our templates look cleaner. 55 00:04:05,210 --> 00:04:10,490 Templates have access to the components properties before we test our code. 56 00:04:10,700 --> 00:04:13,640 Let's explore what else we can write in expressions. 57 00:04:13,940 --> 00:04:18,620 Expressions can contain method calls after the name property. 58 00:04:18,740 --> 00:04:21,620 Let's change the two uppercase function. 59 00:04:24,290 --> 00:04:31,340 Next, let's try creating a method in our class for outputting the name, switch back to the class in 60 00:04:31,340 --> 00:04:34,400 the class defining method called get name. 61 00:04:36,890 --> 00:04:39,830 It'll return the this dot name property. 62 00:04:42,380 --> 00:04:48,500 Back in the template, we will make a copy of the paragraph, take instead about putting the property. 63 00:04:48,590 --> 00:04:51,140 The expression will be replaced with a method. 64 00:04:53,620 --> 00:05:00,340 Once again, we don't need to be this keyword Angular understands we're trying to call a method from 65 00:05:00,340 --> 00:05:04,840 our component class methods or a publicly accessible to a template. 66 00:05:05,170 --> 00:05:07,630 Let's try adding one more expression. 67 00:05:07,930 --> 00:05:12,160 We will add one more paragraph tag for rendering and age. 68 00:05:15,550 --> 00:05:21,310 Instead of outputting a property or method, let's try performing an arithmetic operation. 69 00:05:23,950 --> 00:05:24,970 One last thing. 70 00:05:25,180 --> 00:05:29,480 The text of the paragraph tags will be orange for readability. 71 00:05:29,500 --> 00:05:31,330 We should remove this change. 72 00:05:31,660 --> 00:05:35,140 Open the app component access file. 73 00:05:35,440 --> 00:05:39,280 We're going to remove these stylings we had inside this file. 74 00:05:41,850 --> 00:05:42,630 That'll do it. 75 00:05:42,780 --> 00:05:44,760 Refresh the page in the browser. 76 00:05:47,280 --> 00:05:54,300 The expressions we've written have been interpolated into the browser, Angular gives us a lot of flexibility 77 00:05:54,300 --> 00:05:57,870 with the types of values we can output to the document. 78 00:05:58,230 --> 00:06:03,360 It's common practice to keep the template as minimal as possible for the age. 79 00:06:03,480 --> 00:06:05,880 We're performing an arithmetic operation. 80 00:06:06,180 --> 00:06:11,580 It's not the worst thing in the world, but if we can help it, we should perform operations in the 81 00:06:11,580 --> 00:06:12,240 class. 82 00:06:12,690 --> 00:06:16,230 The job of the template should be to simply output data. 83 00:06:16,830 --> 00:06:22,740 To recap, interpolation is the process of replacing placeholders with string values. 84 00:06:23,010 --> 00:06:27,270 We can output properties by using double curly braces in our templates. 85 00:06:27,750 --> 00:06:31,110 Decode inside the curly braces must be an expression. 86 00:06:31,470 --> 00:06:38,250 The evaluated value from the expression is what will get output in angular will replace the curly braces 87 00:06:38,250 --> 00:06:40,230 with the evaluated value. 88 00:06:40,800 --> 00:06:44,340 There's one more thing I want to show you before ending this lecture. 89 00:06:44,610 --> 00:06:50,340 If you're using Visual Studio code, there's an extension for assisting us with writing templates. 90 00:06:50,580 --> 00:06:53,460 Back in the editor, go to the Extensions tab. 91 00:06:57,930 --> 00:07:01,800 Search for an extension called angular language service. 92 00:07:04,190 --> 00:07:06,290 We're going to install this extension. 93 00:07:06,590 --> 00:07:09,290 It's an official extension by the angular team. 94 00:07:09,620 --> 00:07:15,980 This extension will help us write expressions by giving us a list of properties and methods in the class. 95 00:07:16,280 --> 00:07:17,390 Let's try it out. 96 00:07:17,660 --> 00:07:19,310 Switch over to the templates. 97 00:07:19,610 --> 00:07:23,450 We're going to rewrite the expression for the name as we do. 98 00:07:23,450 --> 00:07:28,490 So, the editor will give us a list of properties and methods inside the class. 99 00:07:30,840 --> 00:07:34,470 This feature can be beneficial for quickly writing templates. 100 00:07:34,740 --> 00:07:40,170 We don't have to switch back and forth between the class and templates in the next lecture. 101 00:07:40,290 --> 00:07:43,950 We're going to continue exploring other component features.