Class binding in angular 2 Video Lecture | Angular 2 tutorial - Front-End Programming

this is part well of angular2 tutorial
in this video we'll discuss CSS class
binding in angular but examples let's
flip to visual studio this is the same
project that we have been working with
so far in this video series within this
style start CSS I'm going to delete all
these existing styles and include three
simple style classes so they've got a
bold class italics class and a color
class and then with the node root
component which is apt or continent of
tears I'm going to include a button
element and I'm going to use the class
attribute of the button element to set a
CSS class so let's set this color class
and remember this tiles dot CSS file is
already referenced within our index dot
HTML at the moment we are not using any
form of angular class binding we have
used a class attribute to Cetacea this
class to this button element so with all
these changes let's run our application
by pressing ctrl f5 notice we have the
color class applied for the button
element at this point let's launch
browser developer tools by pressing f12
click on the elements tab let's expand
my app and notice the class attribute of
the button element color class is added
to it as expected notice at the moment
we have hard-coded date class name
within the view template HTML instead
what we want to do is bind to a property
within our component class
so first let's create a property within
our component class I'm going to call
this classes to apply and this is going
to be of type string and here we can
specify one or more classes that we want
to add to the button element if you want
to specify multiple classes then
separate them by a single space
character and if you look at this Styles
dot CSS we want to add bold class and
italics class to the button element so
I'm going to include both those classes
separated by space as a value for this
property and
we want to bind to this property with a
no app component class so to do that I'm
going to use the class word here and
then I'm going to include that in a pair
of square brackets this is how we tell
angler that we want to use class binding
and we want to bind to this property
so within course it's just going to
specify that property name let's save
these changes and reload of a page
notice it has removed the color class
but added it Alex class and bold class
to confirm this let's look at the
generated HTML look at the class
attribute of the button element we have
the italics class and bold class added
but we don't have the read class here
which we have added using the class
attribute of the button element so use
this form of class binding to replace
all the existing CSS classes with
another set of one or more classes now
let's look at another example if you
ever want to add or remove a single CSS
class then you can use a slightly
different variation of class binding
let's look at that in action
now let's include to break elements
after the button element and let's make
a copy of this button element and within
our app component class I'm going to
include another property I'm going to
call this apply bold class and this is
going to be of type boolean and I'm
going to set it to true for now that
means we want to apply the bold class
and here I'm going to use a slightly
different variation I'm going to use
this word class and then use dot and
then the name of the CSS class that I
want to add of rimu so in this case we
want to add or remove the bold class so
I'm going to specify that class right
here and then I'm going to bind this to
this property of our app component class
so if the value of this property is true
then this class Bold class
we'll be added to the button element and
another important point to keep in mind
is it will not remove the existing CSS
class so in addition to the color class
it's also going to add this bold class
so let's save all these changes and free
lot of webpage look at the second button
element both color and bold classes are
apply and prove that if you look at a
second button element right here look at
the class attribute we have the color
class as well as the pooled class on the
other hand if we set this property to
false or if we remove this property all
together then this bold class is not
added to the button element so let's
save our changes and reload this webpage
one more time notice now the bold class
is not added to the button element and
we can confirm that by looking at the
class attribute right here only color
class is added but not a bold class with
plus binding we can also use exclamation
symbol to specify negation at the moment
apply bold class property is false and
within the trans binding I'm going to
use exclamation right here
so apply bold class it's false we have
another false here denoted by the
exclamation symbol false false becomes
true so in this case bold class will be
applied let's reload this webpage notice
the second button text is folded and if
we look at the generated HTML we have
the bold class added with this style of
class binding we can also remove an
existing CSS class let's prove this now
using the class attribute let's add all
the three classes to the button element
color class italics class and bold class
for a moment let's remove this class
binding from here let's save our changes
and let's reload this webpage now we
expect all the three classes to be added
to the second element notice here we
have the color class italics class and
bold class all be applied to the
button element let's try to remove this
bold class using class binding so at the
moment we have this apply bold class
property set to false let's remove this
exclamation from here so we expect the
bold class to be removed let's reload of
webpage right here one more time notice
the second button element the bold class
is removed as expected so this variation
of class binding works great if we want
to add a remove a single CSS class but
if we want to add or remove multiple CSS
classes then we can make use of any
class directive provided by angular
let's look at this in action now so the
first thing that I'm gonna do is with no
app component class I'm going to create
another property I'm going to call this
apply italics class and let's set both
these properties to true and I'm going
to create a function here I'm going to
call it add classes and button the
function let's create a variable and to
create a variable I'm going to use the
let keyword now we can also use the VAD
keyboard to create the variable but
using lead is going to help us avoid
some of the issues that we run into when
we use where there are several
differences between let and bear we'll
discuss that in a later video but for
now understand that is another way of
declaring variables in JavaScript and
I'm going to name our variable classes
that is the list of classes that we want
to add as remove and I'm going to
initialize this to contain an object and
this object is going to have key value
pairs so the first key value pair is
going to have the key as the name of the
CSS class that we want to add a demo so
we want to add or remove this bold class
so that's going to be the key here and
the value for this is going to be
whatever boundary we have in this
property so I'm going to use that
property this dot apply bold class
similarly the next key value pair is
going to contain you know another name
of the CSS class in our case it's
italics class and the value for this is
the value that we have in this property
apply italics class and then finally we
want this function to return whatever we
have in this variable so let's return
what we have in our process variable and
now let's make a copy of this button so
let's include to break elements right
here and then another button element
then so we want to use the class
attribute to add a color class but even
to use the ng class directive and then
bind that to this add classes method so
at the moment we have only added the
color class using the class attribute
and since the values of these two
properties are true bold class and
italics class should also be added to
the button element so let's save all our
changes and reload of that page let's
look at the generated HTML for our last
button notice in addition to the color
class we also have the bold class and
italics class added now let's say we
want to add the bold class but not the
italics class to achieve that all we
have to do is change the value of this
property to false let's save the changes
to load of webpage one more time and if
we look at the generated HTML notice
only the bold class is applied but not
the italics class and here we have that
example which we just discussed thank
you for listening and have a great day