Styling angular 2 components Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 7 of angular 2 tutorial in
this video we'll discuss the different
options that are available to apply
styles to angular components this is
continuation to part 6 so please watch
part 6 before proceeding so let's look
at the different options for styling
angular components one by one we'll also
discuss the advantages and disadvantages
of each of these options one of the
options is to specify the styles in an
external style sheet styles dot CSS we
have already seen this in action in our
previous video so within visual studio
right here we have the same example that
we worked with in our previous video
notice within this file we have our root
component my app and this component is
defined in this file app the component
dot TS notice within the template right
here we have an h1 element and the
styles for this element are defined in
this file Styles dot CSS so notice here
we have the styles for the h1 element
and within our route component we have
nested employee component which is
defined in this file employee dot
component dot TS and the HTML for this
component is present in a separate view
template file employee dot component
HTML where we have table TR and TD
elements the styles for table and TD
elements are again defined in our style
sheet Styles dot CSS right here and we
have referenced this style sheet within
our index dot HTML file right here so
when we run this application we see the
h1 table and TD elements styled as
expected now let's discuss the
advantages and disadvantages of this
approach there are two advantages with
this approach we have Visual Studio
editor intelligence code completion and
Auto formatting capabilities notice as I
start to type we get visual studio full
intelligence when we select one of the
property names
the code is auto completed at the moment
this code is not properly formatted look
at the font style property name it is
not properly indented and we plus
kaydee simultaneously the code is Auto
formatted for us another benefit is if
we have to change these ties for any
reason we only have to change them at
one place at the moment
TD border color is black if we have to
change it to red we only change it at
this one place let's save our changes
and reload our web page by pressing ctrl
f5 notice the styles are applied as
expected the downside of this approach
is since the styles are defined in an
external style sheet style stop CSS we
must remember to reference the style
sheet within our index dot HTML file
otherwise the Styles will not be applied
and will not be able to reuse our
component there is another disadvantage
as well which we will discuss in just a
bit the next option is to specify styles
inline within the component HTML file
itself so within our employee dot
complained dot HTML file let's specify
the styles in line first let's do that
for the table element similarly let's do
that for all the TD elements since we
have specified our Styles inline let's
comment the same styles that we have in
this Styles dot CSS file let's save all
these changes and then let's reload our
web page by pressing ctrl f5 notice the
styles that we have specified in line
within the comment HTML file are applied
there are three advantages of this
approach which is video editor features
like intelligence code completion and
Auto formatting are available since the
Styles defined here are local to the
component this component can be easily
reused also these Styles do not collide
with styles defined elsewhere in the
application the down side is the
application maintenance let's imagine if
we want to change the PD border color to
red since we have specified the style in
line within every TD element we will
have to change it on every TD element
which is not only tedious but also time
consuming it is also not a very good
practice to mix the HTML and style
like this now let's quickly discuss the
other disadvantage of specifying styles
within style dot CSS at the moment they
have a few Styles defined at the table
level in line with another component
HTML file these are the same styles as
what we have within the style sheet so
let's uncomment these styles so for the
table element we have the same Styles
here except that we have also specified
font style to be italic and here the DD
border color is red so let's change it
to black because that's what we have
within our competent HTML file on every
TD element so let's save all these
changes and then let's reload of web
page by pressing ctrl f5 now notice here
the font is italicized and look at the
styles that we have specified that in
the component HTML file we didn't tell
the font to be italicized but since that
is specified in styles dot CSS right
here and since this time stop CSS is
referenced from index dot HTML page
which is of a host page these styles are
applied to the table element that we
have with another employee component and
you may or may not want this behavior if
you want this behavior then you may
leave it but if you don't want that
behavior then you will have to
specifically override this font style
property within your employee component
so if you don't want the font style to
be italic then said that to normal like
that let's say what changes and then
let's reload of web page by pressing
ctrl f5 now notice the font style is not
italicized so the point that I'm trying
to make is Styles defined in Styles dot
CSS a global and these Styles may affect
these elements if they are present in
other components the next option is to
specify Styles inline in the component
HTML file using the style tag at the
moment we are specified our Styles on
each element instead of this we can use
the style tag so first let's remove
these inline styles
and let's use this style tag instead so
within the style tag we have these
Styles defined for table and TD elements
so let's save our changes and reload our
webpage by pressing ctrl f5 the styles
are applied there are several advantages
of this approach Visual Studio editor
features are available since the Styles
defined here are local to this component
this component can be easily reused and
application maintenance is also easy for
example if we want to change the TD
border color to red
we only have one place to change and
since the Styles defined here are local
to this component they don't collide
with styles defined elsewhere in the
application the next option is to
specify the styles using the component
decorator Styles properly first let's
comment the styles that we have that the
notes tiles dot CSS let's comment this
types for table and TD elements let's do
the same thing with another employee
component HTML file so let's comment
what we have within the style tag and
now we are going to make use of this
component decorator at the moment we're
using selector and template URL
properties in addition to them I'm also
going to use Styles property and then
here we can specify an array of styles
so here the first string contains these
tiles for our table element and I have
got another string here which contains
these tiles for our TD element so let's
save all these changes and then let's
reload our web page now notice whatever
Styles we have defined using Styles
property are applied to the table and TD
elements there are several advantages of
this approach since the Styles are
encapsulated within the component the
component can be easily reused and
application maintenance is also easy
because you only have one place to
change the styles for this component
since the Styles defined using this
approach are local to this component
they don't collide but Styles defined
elsewhere in the application
the downside of this approach is will
not have Visual Studio editor
intelligence code completion and Auto
formatting features available the final
option is to specify these tiles using
the confident decorator styles URL
property with style URLs property we can
reference a style sheet so first to our
employee folder which contains our
employee component let's add a style
sheet so let's right click on the apply
folder ad and we want to add a new style
sheet let's name our style sheet
employee dot component dot CSS now this
style sheet is going to contain the
style for our employee continent we
already have the Styles within Styles
dot CSS so let's copy the Styles from
there and paste them within this style
sheet let's uncomment the Styles and now
we want to reference the style sheet
from our dot ts file so at the moment we
are using styles property which Styles
property we specify the properties the
style properties in line so instead of
using Styles let's use style URLs and
here the value is an array of strings
and each string can point to a different
style sheet so we only have one style
sheet in our case so we are going to use
one string and the URL for our style
sheet is app for slash employee for
slash employee dot component dot CSS
let's save all these changes and then
let's reload our web page by pressing
ctrl f5 notice the styles are applied as
expected there are several advantages of
this approach since the styles are
encapsulated within the component the
components can be easily reused and but
in this dot CSS file we have visual
studio intelligence code completion and
Auto formatting since the Styles defined
within this component or local to this
component they don't collide a bit
Styles defined as where in the
application application maintenance is
also easy as we have only one place to
the styles for this competent so these
are the different options available for
styling angular confidence if you can
think of anything else please leave that
option as a comment on this video thank
you for listening and have a great day