1 00:00:00,120 --> 00:00:05,010 In this lecture, we are going to design an alert component for rendering messages. 2 00:00:05,280 --> 00:00:09,870 The beauty of Angular is being able to perform actions behind the scenes. 3 00:00:10,200 --> 00:00:15,780 Unlike traditional apps, the page does not refresh whenever the user interacts with our app. 4 00:00:16,140 --> 00:00:21,630 On the other hand, we have to inform the user when an action is performed in the background. 5 00:00:21,990 --> 00:00:25,050 We will design a reusable alert component. 6 00:00:25,350 --> 00:00:27,900 The idea of the component will be simple. 7 00:00:28,150 --> 00:00:31,530 It'll be a colored box with a message super simple. 8 00:00:31,740 --> 00:00:37,980 We will use this component to render a message to the user when their registration form is being submitted. 9 00:00:38,400 --> 00:00:41,460 We should let them know we're processing their request. 10 00:00:41,880 --> 00:00:44,470 Let's get started in the command line. 11 00:00:44,490 --> 00:00:50,370 We will run the following command N.G. GC shared slash alert. 12 00:00:52,910 --> 00:00:56,240 We are declaring the component under the shared module. 13 00:00:56,510 --> 00:01:02,030 We will be creating multiple forms throughout our app openly shared module file. 14 00:01:02,540 --> 00:01:04,760 Scroll down to the exports option. 15 00:01:05,030 --> 00:01:07,400 Add the alert component to the array. 16 00:01:10,000 --> 00:01:10,450 Great. 17 00:01:10,630 --> 00:01:15,010 We can start working on the components, open the alert template file. 18 00:01:17,560 --> 00:01:25,450 Inside the template, we will add a div tag with the following classes text white center font bold. 19 00:01:28,010 --> 00:01:33,770 These classes will change the color of the text to white, censor the text and bold in it. 20 00:01:34,070 --> 00:01:42,720 Next, we will add padding and margins and the following classes P for and B for Rounded M.D.. 21 00:01:45,580 --> 00:01:49,990 The last class will round the corners of the box before moving on. 22 00:01:50,170 --> 00:01:53,050 The alert component will not render content. 23 00:01:53,410 --> 00:01:59,380 Instead, it'll allow the parent component to project content inside the div tag. 24 00:01:59,410 --> 00:02:02,350 Let's add the energy content element. 25 00:02:04,910 --> 00:02:06,080 That's basically it. 26 00:02:06,560 --> 00:02:10,340 It's a component with a few classes to make the element stand out. 27 00:02:10,639 --> 00:02:15,500 There's one final class we need to add, which is the background color of the elements. 28 00:02:15,830 --> 00:02:18,440 This part of the component should be dynamic. 29 00:02:18,710 --> 00:02:21,830 We should be able to configure the color through inputs. 30 00:02:22,340 --> 00:02:26,660 You may be wondering why are we choosing to make the background color dynamic? 31 00:02:26,990 --> 00:02:30,140 Different colors are associated with different actions. 32 00:02:30,410 --> 00:02:35,240 The alert component should have a dynamic background color for different colors. 33 00:02:35,570 --> 00:02:38,240 Open the alert component class file. 34 00:02:40,880 --> 00:02:45,800 At the top, we will add the input decorator function to the import statement. 35 00:02:48,350 --> 00:02:55,400 This decorator will help us with accepting input data in the class defining property called color with 36 00:02:55,400 --> 00:02:56,330 this decorator. 37 00:02:58,860 --> 00:03:01,350 The type for this property will be strong. 38 00:03:01,650 --> 00:03:03,390 As for the initial value? 39 00:03:03,420 --> 00:03:05,310 The default color should be blue. 40 00:03:07,950 --> 00:03:12,450 Tailwind has a set of classes for changing the background color of an element. 41 00:03:12,780 --> 00:03:16,710 The format for these classes is the same regardless of the color. 42 00:03:17,220 --> 00:03:24,510 We will create a function for returning the color below the property to a method called Big Color. 43 00:03:27,150 --> 00:03:33,810 Inside this function, we will return the following value B.G. Discolor 400. 44 00:03:36,550 --> 00:03:40,450 The name of the class is big, followed by the name of the color. 45 00:03:40,870 --> 00:03:45,670 You can refer to the tailwind documentation for the list of available colors. 46 00:03:45,970 --> 00:03:49,420 We will typically set the color with the help of an input. 47 00:03:49,840 --> 00:03:52,600 There's one more thing we will add to this function. 48 00:03:52,900 --> 00:03:56,350 We will add the get key word before the function name. 49 00:03:58,840 --> 00:04:01,960 If you're not familiar with this keyword, that's perfectly fine. 50 00:04:02,290 --> 00:04:05,710 The get keyword, we'll treat our function as a getter function. 51 00:04:05,980 --> 00:04:09,700 The purpose of a getter function is to return a modified property. 52 00:04:10,060 --> 00:04:13,210 We don't want to directly access the color property. 53 00:04:13,570 --> 00:04:16,690 Instead, we want to return a class name with the color. 54 00:04:17,110 --> 00:04:20,769 All our function is doing is returning the formatted class name. 55 00:04:21,339 --> 00:04:27,040 The get keyword allows us to access the value returned by the function as a property. 56 00:04:27,460 --> 00:04:32,590 It allows us to create properties with extra logic before the property is set. 57 00:04:33,010 --> 00:04:35,770 Let's try using this property in our template. 58 00:04:36,100 --> 00:04:42,580 Back in the template file, we will bind the new class property to the Big Color property. 59 00:04:45,140 --> 00:04:47,090 Notice how we're writing the property. 60 00:04:47,360 --> 00:04:53,660 It doesn't have parentheses behind the scenes, TypeScript will run the function and store the return 61 00:04:53,660 --> 00:04:54,290 value. 62 00:04:54,350 --> 00:04:56,990 We don't have to invoke the function ourselves. 63 00:04:57,290 --> 00:04:58,670 Our component is ready. 64 00:04:59,000 --> 00:05:02,000 The next step is to start using this component. 65 00:05:02,690 --> 00:05:09,380 Let's update the register component to render this component open the template file for the register 66 00:05:09,380 --> 00:05:10,040 component. 67 00:05:12,610 --> 00:05:18,910 We are going to render the alert box above the form, the name of the component is called app alert. 68 00:05:21,470 --> 00:05:25,670 There are three pieces of information we need to provide the component. 69 00:05:26,030 --> 00:05:28,490 First, we need to provide the content. 70 00:05:28,820 --> 00:05:31,850 The message should be dynamic based on what's happening. 71 00:05:32,210 --> 00:05:34,730 We are going to keep it simple with some text. 72 00:05:35,000 --> 00:05:37,610 Second, we need to toggle its appearance. 73 00:05:37,880 --> 00:05:44,060 We don't want to show the alert component if the user hasn't submitted the form on this component. 74 00:05:44,090 --> 00:05:46,820 We will add an NGF directive. 75 00:05:49,460 --> 00:05:53,600 The condition for this directive will be a property called Show Alert. 76 00:05:56,090 --> 00:06:02,570 Let's add a message inside the tags and an expression for a property called alert message. 77 00:06:05,080 --> 00:06:10,540 Next, we are going to bind the color property to a property called alert color. 78 00:06:13,150 --> 00:06:17,440 We are going to dynamically change the color, text and visibility. 79 00:06:17,830 --> 00:06:21,070 These properties don't exist in our component class. 80 00:06:21,310 --> 00:06:22,750 Let's start creating them. 81 00:06:23,230 --> 00:06:25,930 Open the register component class file. 82 00:06:28,580 --> 00:06:31,910 Inside the class, we will define both properties. 83 00:06:32,210 --> 00:06:35,360 First, we'll start with the show alert property. 84 00:06:35,780 --> 00:06:37,670 The initial value will be false. 85 00:06:40,340 --> 00:06:42,380 The alert component should be hidden. 86 00:06:42,710 --> 00:06:46,070 Next, we will create the alert message property. 87 00:06:48,660 --> 00:06:54,870 This property should contain a message informing the user their account is being created, its value 88 00:06:54,870 --> 00:06:56,430 will be the following value. 89 00:06:56,610 --> 00:06:57,360 Please wait. 90 00:06:57,570 --> 00:06:59,280 Your account is being created. 91 00:07:01,820 --> 00:07:05,150 Lastly, we will define the alert color property. 92 00:07:05,360 --> 00:07:06,950 Its value will be blue. 93 00:07:09,600 --> 00:07:11,070 Our properties are ready. 94 00:07:11,430 --> 00:07:18,120 We are going to change them inside the register function, the console statement can be removed entirely. 95 00:07:18,270 --> 00:07:19,620 We don't need it anymore. 96 00:07:19,890 --> 00:07:23,610 First, we will set the show alert property to true. 97 00:07:26,180 --> 00:07:32,600 This update should render the component above the form next, we will reset the message to its initial 98 00:07:32,600 --> 00:07:33,200 value. 99 00:07:38,090 --> 00:07:42,260 Lastly, the alert color property should be reset to blue. 100 00:07:44,800 --> 00:07:47,890 Resetting our properties might come off as strange. 101 00:07:48,250 --> 00:07:54,850 However, the register function may be called multiple times if the server fails to create an account. 102 00:07:55,060 --> 00:07:58,960 The user might attempt to submit the form again with different values. 103 00:07:59,200 --> 00:08:02,470 If that's the case, we may need to reset the message. 104 00:08:02,830 --> 00:08:05,680 There's one more step before considering our solution. 105 00:08:05,680 --> 00:08:09,700 Complete tailwind is going to run into problems with the dynamic class. 106 00:08:09,700 --> 00:08:15,670 In the alert component class, we're defining a getter function for returning the background class of 107 00:08:15,670 --> 00:08:16,480 the component. 108 00:08:16,720 --> 00:08:21,940 Unfortunately, tailwind will not be able to understand what we're trying to accomplish. 109 00:08:22,240 --> 00:08:25,360 These classes will never be added to the final bundle. 110 00:08:25,600 --> 00:08:32,830 Luckily, we can configure tailwind to manually include classes open the till win configuration file 111 00:08:33,669 --> 00:08:35,470 under the content option. 112 00:08:35,650 --> 00:08:37,960 Add an array called safe list. 113 00:08:40,039 --> 00:08:45,790 We are configuring the perjure, which is responsible for removing unused classes from the bundle, 114 00:08:45,800 --> 00:08:51,860 this array may contain a list of classes that should be included in the bundle, regardless of if they 115 00:08:51,860 --> 00:08:53,090 appear in our app. 116 00:08:53,390 --> 00:08:59,800 Let's add the following classes Big Blue 400 Big Green 400. 117 00:09:00,020 --> 00:09:01,910 Big Red 400. 118 00:09:04,450 --> 00:09:09,610 By adding this option, the background color of our alert box should be toggle of all. 119 00:09:09,850 --> 00:09:11,350 We've done a lot of coding. 120 00:09:11,530 --> 00:09:14,290 It's time to test our component in the browser. 121 00:09:16,350 --> 00:09:20,670 Initially, the component is hidden from the user, which is what we want. 122 00:09:21,000 --> 00:09:24,060 Let's try submitting the form with valid values. 123 00:09:27,900 --> 00:09:30,090 This time, the form gets submitted. 124 00:09:30,420 --> 00:09:33,000 We can clearly see the alert component. 125 00:09:33,330 --> 00:09:36,450 Our message perfectly stands out with that. 126 00:09:36,570 --> 00:09:38,850 We've completed validating the form. 127 00:09:39,180 --> 00:09:41,550 The next step is to create an account. 128 00:09:41,820 --> 00:09:44,460 We will start this process in another section. 129 00:09:44,730 --> 00:09:46,620 We're not going to jump right into it. 130 00:09:46,830 --> 00:09:52,980 Instead, we are going to look into template driven forms at the beginning of this section. 131 00:09:53,070 --> 00:09:57,390 I talked about the two systems in angular four working with forms. 132 00:09:57,780 --> 00:10:01,560 This entire section has been dedicated to reactive forms. 133 00:10:01,920 --> 00:10:05,070 We are going to look at template forms in the next section. 134 00:10:05,370 --> 00:10:10,860 Specifically, we will applying this system to the login form, which is much simpler. 135 00:10:11,130 --> 00:10:13,170 Once you're ready, I'll see you there.