Hello everyone and welcome back.
As we all know one of the most common tasks when creating a graphical interface for our Web site is
that is tied to the HDMI elements.
Uses RSS and we also know that oftentimes this kind of an element can vary dynamically.
For example when the mouse over is a certain area of the page.
In this lesson we're going to learn how to use the V in the directive to dynamically style the HDMI
elements of our web pages.
Let's get started.
OK.
So here we are in business to your code.
And as you can see I've already written most of the boilerplate code for this lesson.
We've got the DB where our application is mounted a link to view GSA domain dot the GSA file which are
yet free compiled creating the viewing instance we're going to use.
And as you might have noticed I've also included a link to bootstrap city and considering that in this
lesson we're talking about style.
We can start by creating another div inside the one we've I.D. Apple.
And considering that we're using Bootstrap we can add a class.
So row justified content center and a bit of margin top as well.
Instead of these we can create another diva with class circle that we can now define here in the head
tag.
So style and your circle we can add some with two hundred and fifty pixel.
Same thing
height and then of course we need to add some borders or border values 50 percent if we now open up
the page in a browser which I've already done.
So I'm going to refresh the page.
We see that of course even though the code is yet nothing is shown because of course when you define
a background color for our circle this is a perfect opportunity for us to start using future yes to
give style to our elements.
And specifically we're going to use the V bind the view directive to bind a set of values to the style
attribute.
So we're in the same div we've Class C call.
We can define v bind color and style into style.
We pass an object where we can define all the different properties using camel case notation and their
respective values.
So for example the ground and then camel case color and if you've never heard about communiques that's
just what it is.
If a property or in general a name is composed by more than one word all the words after the first one
ever the first letter capitalized.
So as background color we can set green it and we can also add some borders or border five pixels solid
orange.
We need to close the object of course.
And if we now go back to the browser and we refresh the page Yeah we can see what a beautiful circle
as you can see this is really powerful and an even better way to do so is to move this style object
inside the detail object within our view is this.
So data India style object we can pass that object maybe as a bit of indentation just to make it look
better like so we can now just pass the name of the style object you are in for now go back to the browser
and refresh the page see article is still here.
Perfect.
Let's now define another CSF class square.
So Square and I'm just going to copy all this ISIS code except for the real use of course.
Let's now see how we can use view yes to dynamically change the class of our diva from cynical to square
and vice versa.
Just by pressing a button.
So I'm going to write a bit more of H to email code.
I'm going to just copy it to leaves like so and notice how I'm staying inside the DB we've I.D. APD
is very important.
And so yeah at this time I can just add a button.
So thanks so mutton.
And considering that we're using Bootstrap I can add the classic battle button success.
India changed shape as you might have guessed based on what we've learned in the previous lessons.
The best way to achieve our goal in this case is to use a method and we combined that method to their
own clique Dom event using their V on active or simply the at symbol.
So either we can just call this method change in shape and of course we now need to define the method
itself.
So your methods change shape.
And even though we've just defined these fantastic change shave method we still need to figure out a
way to actually change the shape of our leaf.
Well doing so is actually pretty easy.
We can define a boolean flag and use a shape or the other.
According to the value assigned to the flag so we are in the data object I'm going to define a flag
variable which I'm going to initialize as true.
And so every time the change shape method is called the Value flag will change.
So these dot flag equals not these dot flag.
We can now go back to our age the email file we can use.
V bind.
Once again this time on the class attribute idea we can simply specify that we want to f the circle
class when flag is true and the square class instead of flag is false.
Pretty symbol.
So let's now go back to the browser.
Let's refresh our page.
Yet we have our changed shape button and you replace it.
Now you'll see that active changes shape and we can now just press it as you see to change the shape
of our div awesome.
If you want to you can now take a second to appreciate our powerful view.
Yes.
Release as you see we've created a very powerful and interactive effect for our web page.
Just by writing very few lines of code you can start to realize and understand our powerful view.
Yes.
Release.
And that we can make our life much easier.
Even when developing complex applications as we'll see later on.
Okay.
That was it for this lecture about class and state binding in Georgia.
Yes.
See you in the next one.
What are we going to talk about the listed ending with v4.