Hello, everyone, and welcome back.
In this lesson, we are going to continue to explore some of the key features of angular code.
We're going to talk about input properties, browser events.
We're going to talk about automatic synchronization between the data and the view.
And we're going to demonstrate some of the angular core built-In security features.
Let's now have a look at some of the things that we can do with our templates.
Let's start by adding here an input box that we are going to be using for modifying the data model of
our application.
Let's add here and input e-mail tag and let's add a class for the purposes of this demonstration.
Let's call the Sears's class demo and we are going to start seeing how can we style angular components.
So as we can see here, linked to this application component class, we have here a style file that
was currently empty.
We can use it here to define a series of styles that are only going to be visible inside our application
component.
Let's quickly add here some styles and we will be covering angular components, styling in detail later
in this course.
Right now, let's simply add here a simple e-mail selector that is going to select as an input filled
with class demo inside this particular component.
And let's add here a couple of very simple styles.
So I'm going to paste in here just a couple of styles so that we can see better the input on the screen
now that the styles are applied.
Let's go back here to our template and let's link our input data, which is available here under this
data, object to this input field.
In order to do that, we can, for example, use here the value property.
So if we add here a string hardcoded, this is just like a plain input e-mail.
We can see here that the text that we pass here to the value property gets reflected here on the screen.
Now, if we want to pass it here, our data titled Property, we need to use the following special angular
syntax.
And the fact that we are surrounding it with brackets is going to tell Angular that the content here
of the string is no longer a plain string.
This will instead become an expression.
So we can based in here inside this value property, the value of the data, the title expression,
if we hit control as we are going to see that we now get here on the screen, the title of the course.
As we can see, these input properties, Syntex, that we have here is how we can pass data to the template.
We could also pass here to the value property using these input properties, syntax, a plain string.
So in order to do that, we would need to see around here the string in quotes if we know hit command
s, we're going to see that we get here again.
These hardcoded string.
This is sometimes used, but if we want to pass in a plain hardcoded string, we can simply use plain
HTML for that.
There is no need to use a special angular syntax.
The angular input properties syntax is useful really in the case where we want to pass in some data
that is available at the level of the component class.
Let's see what else we can do with the angular template syntax.
And the other thing that we can do is handle Browsr native events.
Let's say that, for example, we have here a native click event that we want to detect whenever we
click on the Engelhard Shield.
And in response to that, we would like to display an alert box to the user.
We can do that in the following way.
We need to handle here at the level of the image, the click event and for handling events.
We have the round Brace's syntax and we're going to specify here what event exactly we want to handle
in this case, the click event.
And on response to the event, we need to specify here an expression that is going to tell Angular how
to handle the events.
So we are going to create here a new function on logo Glik that does not exist yet in our component,
but we are going to add it now ourselves.
What is important to keep in mind here is that any function that we call here is going to be resolved
using the component.
So this function here is going to be called and here we can add any logic that we need that will respond
to the Cleek.
So in this case, we are going to add here and alert box.
Hello world.
Let's have a look at this in action.
If we now click here in our image, we would see here an alert box saying hello, world.
As expected, we say it's handling input properties and Browsr native events and.
The other thing that we can do at the level of our template, using angular specific syntax, is to
give to certain elements of the page and name.
For example, using here the hash syntax.
We can give a name to this input box.
We are going to call it title input.
This is called a template reference.
We can now use this reference to refer to this input box in other parts of our template.
The reference can also be injected here at the level of our component, as we will see later in this
course.
Right now, let's see how the template reference for the input can be used here directly in our input.
We're going to start by detecting here the Kiip event at the level of this input and in response to
this Kiip event, we are going to call here the on Kiip method.
This method is going to be added here to our application component.
What we want to do is to pass to this method that we are calling here the current value of the input
box.
So as the user types here in our input box, we want to be able to pass the new value to the component.
The component is going to then take the latest value that we have typed here and it's going to automatically
update the template.
In order to implement this logic, we need to somehow get the current value of the input we can do.
So using here the template reference.
So the template reference is simply pointing to the native DOM element that corresponds to the input.
So if we call here the property value, we are going to be accessing the current value of the input.
Now, at the level of our component, we have received here the new title that we have just passed into
the call to on Kiip, and we are going to be able to use it to modify the model of our application so
we can do that by accessing via the D key word here, the data object.
And we can assign to this title property the new title of value that we have just received.
Let's check this in action.
We have now refreshed the application and if we now start erasing here the title of the course, we
are going to see that the title is being reflected here automatically in our view.
So what you see here is one of the core features of ANGULAR, one of the most important features of
the angular core module, this feature of automatically reflecting in the view any modification that
we do to the data.
Notice that in our program, we did not have to have any specific logic to call ANGULAR to request an
update of The View.
We did not have to update the view manually ourselves.
This is being taken care of by angular automatically in a transparent way behind the scenes, and it's
then in an optimal way, Angular is going to keep track of the changes that we are making to our data.
And Angular is going to update the view in an optimal way.
Only the parts of the view that need to be changed will be changed.
Another very important feature of angular core is that the synchronization between the model of our
application and the view, which is represented by the template, is then in a secure way.
So let's say that, for example, here at the level of our title, some attacker was attempting to inject
some coal in the browser instead of a string.
If we tried to inject here some e-mail, what we're going to see is that ANGULAR is going to detect
that this string here data, that title is being used here in a context that expects a plain string
and it's going to apply the appropriate e-mail escaping.
So as you can see here, this code here works correctly, escape.
This was not interpreted as HTML instead of the escaping took place.
Let's have a look at another example.
Let's say that the attacker was trying to inject here a script.
So this is a more malicious attack instead of simply trying to modify the HTML on the page and change
the look and feel of the page, the attacker is actually trying to inject some code into the user's
browser.
Let's try, for example, to open here an alert box, which is a common way of simulating an attack.
If we tried to inject the string here in our template, take a look to see what happens.
Again, this was not interpreted as JavaScript.
We did not see here an alert box.
Everything was escape's.
And we can see here the script tag on the screen.
Notice that we did not have to do anything special to benefit from this security protection.
This is all built in by.
Angular and it's completely transparent to the application developer.
Let's then summarize what are the key features of ANGULAR?
We have the ability of defining our own custom tags and extend standard browser functionality.
We have also a way of clearly separating in our application, the data or the model of our application
from The View, which is our template.
And we have here a component mechanism that coordinates the interaction between both things.
We also have a built in change detection mechanism, which is completely transparent and that automatically
synchronizes the data with the view.
We don't ever have to write code again.
That does the synchronization manually.
This is done automatically.
And last but not least, the update of our view with new data is then in a secure way, as we have seen.
So if we simply fetch data from the backend and provided here to our component, we are sure that our
application will not suffer from many of the common security attacks that typically this type of applications
are submitted to.
And these, in a nutshell, are the main features of angular core.
This is what a Web framework gives us out of the box.
In the remainder of the course, we are going to explore in detail all the options that we have available
for building our own custom components.
So that's exactly what we are going to do next.
We are going to build our own custom angular component from scratch.