Angular interpolation Video Lecture - Angular 2 tutorial - Front-End Programming

they say is part 8 of Angela tutorial in
this video we'll discuss the concept of
interpolation in angular interpolation
is all about data binding in angular
data binding can be broadly classified
into three categories as you can see on
the Left right here if you look at a
component in angular it has got a
component class and a teleporting butan
plate this view template can be inline
like in this example or it can be in a
separate HTML file so data binding is
all about moving class property values
to its corresponding view template and
pack that is again from view template to
its corresponding class properties so if
you look at the three categories of data
binding we have here the first one-way
data binding deals with binding
component class properties to its
corresponding view template and the
second one-way data binding deals with
binding butan plate to comprehend class
properties and the last one is two-way
data binding so it's going to be back
and forth that is from component to view
template and from you template to
component in this video we'll discuss
the first one-way data binding the rest
of the two categories we'll discuss in
our upcoming videos so binding component
class properties to view template is
achieved using interpolation let's look
at a few examples of interpolation now
this is the same example that we have
been working with so far in this video
series notice at the moment within our
class we have caught a property called
page header and this property is placed
inside these double curly braces so this
is interpolation and this expression is
called template expression so angular
when it looks at this template
expression it's going to retrieve page
header property value convert it to a
string and then replace this data
binding expression with that value so
when we view this page in a browser we
see the value that we have within this
property page header which is employee
details so notice on the page we have
employee details with interpolation it
is also possible to concatenate a
hard-coded string with a property value
for example
say we want to display page header
equals my employee details on this
webpage to achieve this I'm going to a
hard-coded string within our template
expression so within single quotes let's
have this hard-coded string page header
equals and this hard-coded string we
want to concatenate the value that we
have in this page had a property so
let's save our changes and let's reload
our web page by pressing ctrl f5 notice
we see page header equals employee
details you can also specify
calculations if you want let's say for
example I want to add 10 20 and 30 so 10
plus 20 plus 30 let's save and let's
reload our webpage now we should say the
sum of 10 plus 20 plus 30 which is 60 so
this template expression can be any
valid expression we can even use ternary
operator let's look at an example of
that here is what we want to do if we
have a value for this page header
property then we want to display that
value if the value is null then we want
to display no header we can very easily
achieve this using ternary operator so
the first thing that we want to check is
if we have page header value if that has
got a value then display the page header
value else display this hard-coded
string no header let's save our changes
and let's reload our web page now since
we have the value within the property we
see that value employee details let's
set this to null now and see what
happens let's reload our page one more
time notice now we see no header as
expected interpolation can also be used
to bind component class properties to
HTML element properties let's understand
this with an example here is what we
want to do we want to display this
present Tech logo on our web page so for
that let's use an image element within
our view template and we want to set
this source property but we don't want
to hard code the source property value
here instead within
or app component class let's have a
property let's call it image path and
the datatype for this is string and we
need to specify the URL for the logo so
let's go back to presume tech website
right click on the image and then select
this option copy image address and then
let's paste that right here now we want
to bind this property of the component
class with the source property of the
image element and we are going to use
interpolation for that so within double
curly braces
we're going to specify our property name
which is image path let's save our
changes and then let's reload our page
one more time notice we see prism tech
logo as expected using interpolation we
can also call class methods at the
moment within this class we don't have
any methods so let's create a method
before that let's create two more
properties the first property I'm going
to create is first name which is of type
string and it has a default value Tom
let's create another property let's call
this last name and it's going to have
Hopkins as the default value now let's
create our method in typescript to
create a method we first specify the
name of the method in this case our
method name is get full name and this
method does not have any parameters if
you have any parameters for the method
you can specify them within parentheses
and then specify colon and return type
of the function our function is going to
return full name which is of type string
and then we open in close curly braces
which is the body of the function
so all this function is going to do is
compute full name using first name and
last name properties and return that so
let's return this dot first name so this
means an instance of this class and we
want this first name property value to
that concatenate a single space
character and to that concatenate the
value that we have any last name
property
and now what we want to do is call this
method from the view template and to do
that we're going to use interpolation so
within the h1 element here I'm going to
call that function get full name let's
save our changes and let's reload this
webpage notice now we see the full name
of the employee so here we have all
those interpolation examples which we
just discussed thank you for listening
and have a great day