Style binding in angular 2 Video Lecture - Angular 2 tutorial - Front-End

they say spot 13 of angular2 tutorial in
this video we'll discuss tile binding in
angular with examples setting in line
Styles with style binding is very
similar to setting CSS classes but class
binding let's look at an example and
let's replace all these pattern elements
with another button element and let's
use the style attribute to set the font
color let's set font color to red let's
run the application by pressing ctrl f5
at the moment we are not using any form
of angular's tile binding notice our
inline style color red is applied to the
button
as expected now let's look at a simple
example of setting a single inline style
using angular style binding the first
thing that I'm going to do is introduce
a property within our app component
class I'm going to name this property is
Paul this is going to be of type boolean
and let's set it to a default value of
true and to use angular inline style
binding within a pair of square brackets
we use the word style followed by that a
dot and then the inline style that we
want to set we want to set font weight
inline style and we want to bind this to
this property is bold of our app
confident class if the value of this
property is true then we want to set
font weight to bold
else we want to set it to normal let's
say all our changes and reload of web
page notice the font weight on the
button is set to bold to confirm this
let's launch browser developer tools and
inspect the generated HTML so if you
look at the button element right here
notice the style property we have both
the inline Styles color and font weight
set as expected here is the example
which we discussed just now keep in mind
style property name can be written
either in - case like this or we can use
camel case so instead of using font -
weight like this we can use camel case
font weight and this
should work exactly the same way as
before let's save all changes and reload
of webpage one more time by pressing
ctrl f5 and notice font weight inline
style is applied the same way as before
some Styles like font size have a unit
extension to set phone size in pixels
for example we have a slightly different
variation of style binding let's look at
that in action first let's introduce a
property within our app component class
I'm going to call it font size and this
is going to be off type number let's set
it to a value of 30 let's include to
break elements after the first button
and let's make a copy of this button and
we want to bind this button to this font
size property so style dot font - size
equals of a property name which is font
size now remember we want to set font
size in line style in pixels so to the
in line style we append dot P X to
denote that we want to set font style in
pixels let's save our changes and reload
of web page by pressing ctrl f5 and if
we inspect the generated HTML notice for
the second button font size is set to 30
pixels as expected here is that same
example so far we have seen how to set a
single inline style how about setting
multiple inline styles to set multiple
inline styles we can make use of the
built-in directive ng style provided by
angular using ng style directive is very
similar to using ng class directive that
we discussed in a previous video so
let's look at an example of that now the
first thing that I'm going to do is
introduce a new property within our app
component class I'm going to name it is
italic notice we have set a default
value of true and then let's add a
function within our class
I'm going to call it ad styles and
within the function let's create a
variable we are using javascript let
keyword to create available we can also
use vacuo to do the same there are
several differences between let and bear
we'll discuss those differences in a
later video for now understand let is
another way of declaring available in
JavaScript let's name or variable styles
this object is going to contain key
value pairs key is going to be the name
of the inline style that you want to add
and the value is a value for that inline
style first let's set font size inline
style so forth - size we want to set
font size in pixels and we want to bind
this to font size property of our app
component class next let's set font
style and we want to bind this to ease
italic property of our app content class
if is italic is true then we want to set
font style to italic else normal let's
set another inline style let's now set
font weight and we want to bind this to
is bold property if is bold is true then
we want to set font weight to bold
else normal and finally we want to
return this object styles so return
styles and now let's include
to break elements after the second
button element let's make a copy of the
button element and we want to use the ng
style built-in directive provided by
angular and we want to bind that to this
method so within codes we specify the
name of a function which is add styles
so let's save all our changes and reload
of web page
and if we look at the third button
element notice the font style is
italicized font rate is bold and font
sizes also that it excels to confirm
that let's look at the generated HTML
for that last button look at that font
size is 30 pixels font-style:italic and
font-weight:bold here is that same
example thank you for listening and have
a great day