WEBVTT 00:00.180 --> 00:02.260 Hello everyone and welcome back. 00:02.280 --> 00:07.260 In this lesson we're going to learn how to programmatically show elements in our web pages when certain 00:07.260 --> 00:08.460 conditions are met. 00:08.460 --> 00:15.000 We're going to introduce the following that actives the ether the s the EXIF and V show. 00:15.000 --> 00:16.660 Let's get started. 00:16.660 --> 00:17.990 It really means wants to decode. 00:18.030 --> 00:23.030 As you can see I've basically set up all the boilerplate code that we're going to need for this lesson. 00:23.040 --> 00:26.410 The conditional event that in HCM and file and main dot J. 00:26.430 --> 00:33.270 Yes file and as you can see in the HDMI document I've set up a div with I.D. at the and I've included 00:33.420 --> 00:34.840 this in the future. 00:34.890 --> 00:35.570 Yes. 00:35.790 --> 00:36.810 And you may not. 00:36.810 --> 00:38.410 J Yes fine. 00:38.880 --> 00:42.580 And I've also already opened the file in chrome. 00:42.780 --> 00:46.910 We now need to create our view instance in the main the G Yes file. 00:46.950 --> 00:51.080 So var up equals new view. 00:51.570 --> 00:56.630 And as always we passed the options object and here of course we have l. 00:56.940 --> 00:58.620 So it's R D. 00:58.660 --> 01:06.260 We've I.D. Apple then the data object and for this first example that we're going to make. 01:06.260 --> 01:11.820 Now let's imagine that we're creating a user profile page for a single page application. 01:11.880 --> 01:18.840 Therefore we want to change the content of our Web page depending if the user is authenticated or not 01:19.320 --> 01:26.880 we can set it off probability which we can initialize to force and we are now going to use two new view 01:26.940 --> 01:34.200 directives the F and the v Elsa to change the content shown in our web page based on the current value 01:34.200 --> 01:35.640 assigned to us. 01:35.910 --> 01:43.950 So going back to the aged email document inside the DB we've I.D. Apple we can define an H1 tag we have 01:43.950 --> 01:56.060 the phrase your user profile and then another H1 with the phrase log in to access your profile. 01:56.600 --> 02:06.450 And so we can use the V if and V as directives like so first of all V if we pass the auth property and 02:06.450 --> 02:13.800 then right below the IFA we can use v else without having to specify anything because we are next to 02:14.010 --> 02:22.170 the if and this is in fact that you typically use V E F and V S you check the condition on the ether 02:22.710 --> 02:25.710 and place an alternative right next to it. 02:26.310 --> 02:30.330 So let's now go back to crawl let's refresh. 02:30.850 --> 02:36.530 And of course now we have looking to access your profile in a real world use case as the one that we're 02:36.550 --> 02:41.890 going to build in the last section of the course your front end single page application is going to 02:41.890 --> 02:48.120 be communicating with your arrest API backend which is going to tell the front end if the user that 02:48.140 --> 02:50.710 is making the request is authenticated or not. 02:50.800 --> 02:56.560 We also know that our view applications are reactive therefore we can just access all the values from 02:56.560 --> 02:57.340 the console. 02:57.370 --> 03:05.560 And because we've defined off inside the data object we can now change its value so up not off and we 03:05.560 --> 03:08.050 can all set through. 03:08.290 --> 03:13.380 And as you see as expected according to our Abuja yes application we have now log Dean. 03:13.520 --> 03:16.670 Therefore I to use it profile is shown perfect. 03:16.810 --> 03:21.190 And of course if we want to we can log ourself out once again. 03:21.200 --> 03:28.990 So falls and they do go with changes once again and then logging ourselves back in once again user profiling 03:29.050 --> 03:34.470 is shown less they'll make a more complex example going back to the main dot genius file. 03:34.480 --> 03:40.450 I'm going to delete author and let's suppose we are now building a web page for an online store. 03:40.460 --> 03:49.400 So first of all we're going to need a product such as for example sun glasses then a quantity for example 03:49.480 --> 03:57.590 a hundred and fifty and then add boolean flag sale which we can initialize as true. 03:57.620 --> 04:03.380 Typically you would get all of these details inside a product JS on for example sent from your arrest 04:03.440 --> 04:04.100 API. 04:04.190 --> 04:07.250 But of course for an example this is perfectly fine. 04:07.250 --> 04:10.760 So let's go back to the HDL document. 04:10.820 --> 04:17.660 We can delete these two h1 tags and let's say that we want to show a different message depending on 04:17.690 --> 04:19.740 how many sunglasses we have left. 04:19.800 --> 04:25.580 We're going to show available if we've got more than 20 units limited availability if you've got less 04:25.580 --> 04:30.180 than 20 units and sold out in case we've got no sunglasses left. 04:30.230 --> 04:33.760 And in fact the area we can also add the details of a product. 04:33.780 --> 04:36.770 So product and product. 04:36.850 --> 04:37.210 Yeah. 04:37.760 --> 04:50.160 So let's add all the different options first available then limited availability and then as we said 04:51.720 --> 04:54.810 sold out let's us define all the different clauses. 04:54.810 --> 05:05.560 So V if the quantity is greater than or equal to 20 then the product is available V. 05:05.890 --> 05:16.290 Else if the quantity is greater than zero and at the same time quantity is less than 20. 05:16.290 --> 05:26.080 In that case we have limited availability and here we can just add the NSA like so in this case the 05:26.080 --> 05:28.410 product is sold out. 05:28.480 --> 05:35.410 So let's now go back to Cairo and if we refresh the page of course we get the defense of the product. 05:35.410 --> 05:38.300 Product sunglasses and a status is available. 05:38.500 --> 05:44.740 Let's now assign a different value to quantity so up to quantity and we can said something like even 05:44.740 --> 05:46.190 just 19. 05:46.210 --> 05:48.800 And of course we now get limited availability. 05:48.900 --> 05:54.640 And if you know assign zero to quantity of course we get sold out. 05:54.640 --> 05:57.650 Now even if we just add 20 more units. 05:57.700 --> 05:59.870 Of course we get available once again. 05:59.890 --> 06:03.170 So this is the behavior that you probably expect to have. 06:03.190 --> 06:04.030 Right. 06:04.030 --> 06:11.350 Let's expand the developer tools and let's go to the elements we know go into open body and deal with 06:11.380 --> 06:12.030 idea. 06:12.190 --> 06:16.580 It is our age do we have available and here we have the console. 06:16.750 --> 06:21.290 So we can just do something like this. 06:21.420 --> 06:23.840 And so pay attention on what happens now. 06:23.910 --> 06:24.900 Let's make a sale. 06:25.080 --> 06:28.160 So I'm going to bring quantity down to 19. 06:28.290 --> 06:35.790 We get limited availability and the H2 we have available is replaced with a new one that at this time 06:35.790 --> 06:41.030 says limited availability using VEGF v SIF and V Elsa. 06:41.250 --> 06:43.650 Either we show an element where our condition is matched. 06:43.800 --> 06:45.870 Otherwise we just don't show it. 06:45.870 --> 06:51.180 However as we have now going to see out of Europe is going to behave differently when using the V show 06:51.270 --> 06:52.390 directive. 06:52.410 --> 07:00.260 So let's go back to this one is did your code now you can just go in fact full screen like so and so 07:00.260 --> 07:07.040 remember that we've got our boolean flag sale that we can use to show an on sale message what its value 07:07.190 --> 07:07.910 is true. 07:07.910 --> 07:15.910 So let's go back to the e-mail find we can have it be our tag and then here maybe n h three tag India 07:15.950 --> 07:25.160 we can add on sale like so that we can now use that V show that you're active and as we've said we want 07:25.160 --> 07:28.840 to show it to any sale is true. 07:28.910 --> 07:29.400 Like so. 07:29.600 --> 07:34.110 So going back to Chrome once again let's refresh our page. 07:34.270 --> 07:37.900 And of course at the moment we have on sale. 07:37.900 --> 07:43.280 So let's open up the body once again like so and indeed we have idea. 07:43.420 --> 07:48.200 So we've got the available H2 and the on sale H3. 07:48.220 --> 07:48.890 Right. 07:48.910 --> 07:50.760 Let's now switch our boolean flag. 07:50.860 --> 07:55.530 So app dot sale equals false. 07:55.660 --> 08:00.280 And as you can see the on sale message has in fact been hidden from the user. 08:00.490 --> 08:07.720 However as you can see it is still in our view as added did display CSX property. 08:07.720 --> 08:13.930 We've known as value now going back on sale with up to see through. 08:14.050 --> 08:19.210 You see that the display probability is being deleted and therefore our users can't see the tag once 08:19.210 --> 08:23.250 again that was it for this lecture about conditional rendering in future. 08:23.260 --> 08:23.950 Yes. 08:23.950 --> 08:24.950 See you in the next one. 08:24.970 --> 08:27.700 What are we going to talk about class and site binding.