1 00:00:00,150 --> 00:00:06,600 In this lecture, we're going to start exploring some pipes, Angular comes with a couple of pipes built 2 00:00:06,600 --> 00:00:07,740 into their framework. 3 00:00:07,980 --> 00:00:11,070 We have the option of creating custom pipes too. 4 00:00:11,430 --> 00:00:13,680 We will start with angular pipes. 5 00:00:13,950 --> 00:00:15,780 They should cover most cases. 6 00:00:16,050 --> 00:00:22,930 In the resource section of this lecture, I provide a link to an official list of pipes offered by Angular. 7 00:00:23,490 --> 00:00:29,370 Before we move further, I think this would be a great opportunity to teach you how to navigate the 8 00:00:29,370 --> 00:00:30,450 documentation. 9 00:00:30,760 --> 00:00:34,950 It's going to be important later down the line when working on projects. 10 00:00:35,310 --> 00:00:41,130 We can arrive at the documentation by clicking on the docs link at the top of the page. 11 00:00:41,730 --> 00:00:46,530 Angular will provide a couple of guides for getting started on the sidebar. 12 00:00:46,710 --> 00:00:52,650 There are additional links to different topics I find angular to be heavily documented. 13 00:00:53,040 --> 00:01:00,030 Almost every corner of the framework has been documented for you before checking out the documentation. 14 00:01:00,180 --> 00:01:03,060 We should verify we're reviewing the latest version. 15 00:01:03,420 --> 00:01:06,180 Angular regularly pushes updates. 16 00:01:06,480 --> 00:01:10,740 This means there are different versions of a document for each release. 17 00:01:11,040 --> 00:01:15,330 We should always check reviewing the documentation for the correct version. 18 00:01:15,690 --> 00:01:20,760 Otherwise, we may be working with outdated information on the sidebar. 19 00:01:20,790 --> 00:01:23,700 We can select the version by default. 20 00:01:23,880 --> 00:01:28,950 The documentation will select the most recent stable version of the framework. 21 00:01:29,490 --> 00:01:34,140 After selecting the version, we might want to jump to the API reference. 22 00:01:34,440 --> 00:01:39,480 An API reference is a list of every function and class in a framework. 23 00:01:39,840 --> 00:01:44,530 We can get to the API reference by opening the reference menu item. 24 00:01:44,910 --> 00:01:49,710 Under this menu item, there is a submenu called API Reference. 25 00:01:49,980 --> 00:01:50,760 Click on it. 26 00:01:53,330 --> 00:01:57,890 We will be taking to a long list of functions and classes in Angular. 27 00:01:58,160 --> 00:02:03,620 Luckily, we won't have to scroll around to find what we want at the top of the page. 28 00:02:03,770 --> 00:02:04,610 There's a filter. 29 00:02:04,610 --> 00:02:06,440 We can apply to this page. 30 00:02:06,650 --> 00:02:08,750 We will set the type to pipe. 31 00:02:11,510 --> 00:02:16,400 Angular will present us with a list of every pipe available in the framework. 32 00:02:16,730 --> 00:02:20,750 We will be exploring most of these above the list of pipes. 33 00:02:21,020 --> 00:02:24,620 Angular will tell us which package contains the pipes. 34 00:02:24,890 --> 00:02:27,110 Let's click on the common package. 35 00:02:29,550 --> 00:02:34,650 By default, the common package is not imported into an angular project. 36 00:02:34,980 --> 00:02:40,290 If we want pipes to be available in our app, we need to register this package. 37 00:02:40,620 --> 00:02:45,300 According to the description, we can register this package through a module. 38 00:02:45,630 --> 00:02:48,420 These pipes are exported from two modules. 39 00:02:48,700 --> 00:02:51,780 They're the common and browser modules. 40 00:02:52,200 --> 00:02:58,950 However, reading further, the description tells us these modules are registered for new projects. 41 00:02:59,280 --> 00:03:03,810 Let's check out the app DCOP Module Détaillées File in our ED. 42 00:03:06,330 --> 00:03:13,050 As we can see, the browser module has been registered, Angola's pipes are readily available in our 43 00:03:13,050 --> 00:03:13,890 components. 44 00:03:14,160 --> 00:03:15,810 Let's use our first pipe. 45 00:03:16,020 --> 00:03:17,610 It won't be tricky at all. 46 00:03:17,970 --> 00:03:21,840 The syntax for running a value through a pipe is simple. 47 00:03:22,260 --> 00:03:25,440 The first pipe we will learn is called tidal case. 48 00:03:25,740 --> 00:03:30,060 This pipe will capitalize the first letter of each word in a string. 49 00:03:30,510 --> 00:03:33,180 Any other characters will be lowercase. 50 00:03:33,480 --> 00:03:37,380 The goal of the title case pipe is to output a title. 51 00:03:37,710 --> 00:03:45,270 It works for names to this pipe can be helpful for providing consistent formatting for titles and names. 52 00:03:45,780 --> 00:03:49,380 Let's apply this pipe to our name in the app components. 53 00:03:49,710 --> 00:03:51,840 Open the app component class. 54 00:03:54,370 --> 00:04:00,130 Inside this class, we are going to convert the letters in the name to lowercase letters. 55 00:04:02,700 --> 00:04:06,180 It'll give us an opportunity to test if the pipe is working. 56 00:04:06,570 --> 00:04:09,750 Next, let's open the app template file. 57 00:04:12,390 --> 00:04:19,350 Inside the first paragraph tag, we are going to update the expression we can apply a pipe by adding 58 00:04:19,350 --> 00:04:25,950 the pipe character, followed by the name of the pipe finding the pipe character can vary from keyboard 59 00:04:25,950 --> 00:04:26,790 to keyboard. 60 00:04:27,180 --> 00:04:31,950 Typically, it can be found above the enter key while holding the shift key. 61 00:04:32,280 --> 00:04:35,910 For this example, we will apply the title case pipe. 62 00:04:38,450 --> 00:04:45,630 Pipes are applied after the expression has been evaluated whenever a value gets evaluated from the expression 63 00:04:45,750 --> 00:04:50,690 we passed onto the pipe, the pipe will return a formatted value. 64 00:04:51,050 --> 00:04:54,590 The formatted value will be output it onto the page. 65 00:04:54,890 --> 00:04:57,350 Let's check out the page in the browser. 66 00:04:59,930 --> 00:05:03,410 The name has been properly title cased, perfect. 67 00:05:03,680 --> 00:05:06,860 You may notice the name below hasn't been changed. 68 00:05:07,130 --> 00:05:12,600 If you can recall, the second expression will use a method for returning the property. 69 00:05:12,980 --> 00:05:15,770 Pipes do not directly modify properties. 70 00:05:15,980 --> 00:05:22,040 This is very important to remember the purpose of a pipe is to transform the outputs. 71 00:05:22,370 --> 00:05:25,490 The value in the class will remain unchanged. 72 00:05:25,820 --> 00:05:31,430 Pipes are incredibly helpful for formatting a value before rendering it on the page. 73 00:05:31,790 --> 00:05:37,940 The value for the name property will always be lowercase, even after running it through a pipe. 74 00:05:38,240 --> 00:05:41,230 Let's continue our journey in the next lecture.