Hello everyone and welcome back.
In this lesson we're going to learn how to programmatically show elements in our web pages when certain
conditions are met.
We're going to introduce the following that actives the ether the s the EXIF and V show.
Let's get started.
It really means wants to decode.
As you can see I've basically set up all the boilerplate code that we're going to need for this lesson.
The conditional event that in HCM and file and main dot J.
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
this in the future.
Yes.
And you may not.
J Yes fine.
And I've also already opened the file in chrome.
We now need to create our view instance in the main the G Yes file.
So var up equals new view.
And as always we passed the options object and here of course we have l.
So it's R D.
We've I.D. Apple then the data object and for this first example that we're going to make.
Now let's imagine that we're creating a user profile page for a single page application.
Therefore we want to change the content of our Web page depending if the user is authenticated or not
we can set it off probability which we can initialize to force and we are now going to use two new view
directives the F and the v Elsa to change the content shown in our web page based on the current value
assigned to us.
So going back to the aged email document inside the DB we've I.D. Apple we can define an H1 tag we have
the phrase your user profile and then another H1 with the phrase log in to access your profile.
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
then right below the IFA we can use v else without having to specify anything because we are next to
the if and this is in fact that you typically use V E F and V S you check the condition on the ether
and place an alternative right next to it.
So let's now go back to crawl let's refresh.
And of course now we have looking to access your profile in a real world use case as the one that we're
going to build in the last section of the course your front end single page application is going to
be communicating with your arrest API backend which is going to tell the front end if the user that
is making the request is authenticated or not.
We also know that our view applications are reactive therefore we can just access all the values from
the console.
And because we've defined off inside the data object we can now change its value so up not off and we
can all set through.
And as you see as expected according to our Abuja yes application we have now log Dean.
Therefore I to use it profile is shown perfect.
And of course if we want to we can log ourself out once again.
So falls and they do go with changes once again and then logging ourselves back in once again user profiling
is shown less they'll make a more complex example going back to the main dot genius file.
I'm going to delete author and let's suppose we are now building a web page for an online store.
So first of all we're going to need a product such as for example sun glasses then a quantity for example
a hundred and fifty and then add boolean flag sale which we can initialize as true.
Typically you would get all of these details inside a product JS on for example sent from your arrest
API.
But of course for an example this is perfectly fine.
So let's go back to the HDL document.
We can delete these two h1 tags and let's say that we want to show a different message depending on
how many sunglasses we have left.
We're going to show available if we've got more than 20 units limited availability if you've got less
than 20 units and sold out in case we've got no sunglasses left.
And in fact the area we can also add the details of a product.
So product and product.
Yeah.
So let's add all the different options first available then limited availability and then as we said
sold out let's us define all the different clauses.
So V if the quantity is greater than or equal to 20 then the product is available V.
Else if the quantity is greater than zero and at the same time quantity is less than 20.
In that case we have limited availability and here we can just add the NSA like so in this case the
product is sold out.
So let's now go back to Cairo and if we refresh the page of course we get the defense of the product.
Product sunglasses and a status is available.
Let's now assign a different value to quantity so up to quantity and we can said something like even
just 19.
And of course we now get limited availability.
And if you know assign zero to quantity of course we get sold out.
Now even if we just add 20 more units.
Of course we get available once again.
So this is the behavior that you probably expect to have.
Right.
Let's expand the developer tools and let's go to the elements we know go into open body and deal with
idea.
It is our age do we have available and here we have the console.
So we can just do something like this.
And so pay attention on what happens now.
Let's make a sale.
So I'm going to bring quantity down to 19.
We get limited availability and the H2 we have available is replaced with a new one that at this time
says limited availability using VEGF v SIF and V Elsa.
Either we show an element where our condition is matched.
Otherwise we just don't show it.
However as we have now going to see out of Europe is going to behave differently when using the V show
directive.
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
remember that we've got our boolean flag sale that we can use to show an on sale message what its value
is true.
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
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
to show it to any sale is true.
Like so.
So going back to Chrome once again let's refresh our page.
And of course at the moment we have on sale.
So let's open up the body once again like so and indeed we have idea.
So we've got the available H2 and the on sale H3.
Right.
Let's now switch our boolean flag.
So app dot sale equals false.
And as you can see the on sale message has in fact been hidden from the user.
However as you can see it is still in our view as added did display CSX property.
We've known as value now going back on sale with up to see through.
You see that the display probability is being deleted and therefore our users can't see the tag once
again that was it for this lecture about conditional rendering in future.
Yes.
See you in the next one.
What are we going to talk about class and site binding.