#09 Styling View Template | Angular Components & Directives| A Complete Angular Course
Summary
TLDRThis lecture explains how to style the HTML of a view template in Angular. The speaker demonstrates styling elements using the 'Styles' property by applying CSS directly in the component's metadata. Additionally, they cover styling through external CSS files using the 'styleUrls' property for better maintainability. The differences between these methods are discussed, highlighting the drawbacks of inline styles and emphasizing the importance of component-specific CSS. Finally, the lecture clarifies that styles applied to a parent component do not affect child components, unlike in React.
Takeaways
- 💻 The view template of a component is the HTML structure associated with it, and it can be styled in multiple ways.
- 🔗 The 'Styles' property in the metadata object allows for direct styling of the HTML elements within the view template.
- 🚫 CSS styles like `text-decoration: none` can be applied to remove the underline from anchor elements and add margin between them.
- 🖱️ Button elements can also be styled with CSS directly within the Styles array, like adding padding to the button.
- 📏 Classes and IDs can be used to style specific elements within the component, such as a `div` element using its class name.
- ⚠️ A major downside of using the 'Styles' array is the mixing of TypeScript and CSS, making the code harder to maintain.
- 🔍 Errors in the 'Styles' array won’t be caught during compile time, but only during runtime, posing debugging challenges.
- 📝 The 'styleUrls' property is a better approach for managing styles, as it allows linking to external CSS files, improving maintainability.
- 🌐 Styles defined in the 'styleUrls' will only apply to the specific component they are associated with and not affect child components.
- 💡 In Angular, unlike React, styles applied to a parent component do not automatically propagate to child components, ensuring scoped styling.
Q & A
What is a view template in Angular?
-A view template in Angular refers to the HTML file that defines the structure and layout of a component's user interface. For example, the 'header.component.html' file is the view template for the 'header' component.
How can you style HTML elements in a view template using the 'Styles' property?
-You can use the 'Styles' property within the component's metadata object to directly style HTML elements. The 'Styles' property accepts an array of strings, where each string contains the CSS styles for a specific HTML element. For example, to remove the underline from anchor tags, you can define CSS like 'text-decoration: none;' within the array.
What are the limitations of using the 'Styles' property in Angular?
-The main limitations are: 1) Mixing CSS with TypeScript code, which is not a good practice and makes code less maintainable. 2) CSS is treated as a string, so syntax errors are only detected at runtime, not compile time. 3) If the CSS grows, the array becomes large and unmanageable.
How can you style elements using the 'styleUrls' property in Angular?
-Instead of using the 'Styles' property, you can use the 'styleUrls' property to reference external CSS files. This is done by specifying the path to a CSS file within an array. The styles defined in this external file will be applied to the component's view template.
What are the benefits of using 'styleUrls' over 'Styles'?
-The main benefits are: 1) Keeping the CSS separate from TypeScript, which improves maintainability. 2) Syntax errors in CSS can be caught during compile time. 3) The CSS can be written in external files, which makes it easier to manage larger amounts of styling code.
How does Angular apply styles using 'styleUrls'?
-When using the 'styleUrls' property, the styles in the referenced CSS file are scoped to the component's view template. This means the styles will only affect the HTML within the component and will not affect other components.
Can styles from a parent component affect a child component in Angular?
-No, in Angular, styles applied in a parent component (such as in its CSS file) do not automatically propagate to child components. Each component's styles are scoped to that component unless explicitly shared.
How would you style an HTML element by its class name in Angular?
-You can style an HTML element by its class name in the 'Styles' array by using a dot (.) followed by the class name, and then defining the styles inside curly braces. For example, '.ecat-header { width: 100%; height: 70px; }' styles the div with the 'ecat-header' class.
What happens if you miss a colon or semicolon while using the 'Styles' property?
-If you miss a colon or semicolon in the 'Styles' property, no error will be shown at compile time because the CSS is treated as a string. The error will only surface at runtime when the styles fail to apply correctly.
Can multiple CSS files be used in the 'styleUrls' property?
-Yes, multiple CSS files can be used in the 'styleUrls' property by adding their file paths as strings in the array, separated by commas. Each specified file's styles will be applied to the component's view template.
Outlines
📚 Introduction to Styling View Templates
In this paragraph, the speaker introduces the concept of styling view templates in Angular. They explain that in the previous lesson, the focus was on creating view templates, and in this lesson, the focus shifts to how to style the HTML within those templates. The example used is a header component, where the content of the `header.component.html` is rendered when the `app-header` selector is used.
🎨 Using the Styles Property
The speaker demonstrates how to style HTML elements using the `Styles` property in Angular. By defining styles directly in the metadata object, they show how to remove underlines from anchor elements and add margins between them. Similarly, padding is added to a button element. The explanation includes step-by-step instructions on defining styles using CSS within the `Styles` array, making the HTML elements appear more visually appealing.
📏 Styling Elements by Class and ID
This section shows how to style HTML elements by targeting class and ID selectors. The speaker explains how to style a `div` element with a class of `ecat-header` and modify its width and height. Additionally, they mention how to style elements by their IDs, providing a clear understanding of how CSS can be applied to elements in the view template using the `Styles` array.
⚠️ Disadvantages of the Styles Property
The speaker discusses the downsides of using the `Styles` property in Angular. The first drawback is mixing CSS with TypeScript, making the code less maintainable. Secondly, there’s no compile-time error detection for incorrect CSS, so errors are only caught at runtime. Finally, if the styles grow, the array can become large and messy. These issues make maintaining large codebases difficult.
🗂️ Transition to Style URLs Property
In this part, the speaker introduces the `styleUrls` property as an alternative to the `Styles` array. Instead of writing CSS directly in the metadata, external CSS files are used, leading to cleaner and more maintainable code. The speaker walks through the process of creating a `header.component.css` file, writing styles within it, and linking it to the component via the `styleUrls` array. This method helps organize CSS for large projects.
🎯 Scope of Styles in Angular Components
Here, the speaker highlights how CSS styles in Angular are scoped to individual components. They explain that styles defined in a component's CSS file apply only to that component, and not to other components or their child components. This isolation is demonstrated by comparing a button in both the `app` and `header` components, showing how styles from one component don’t affect elements in another.
💡 Conclusion on Styling View Templates
The final paragraph summarizes the lesson on styling view templates using both the `Styles` property and `styleUrls`. The speaker reiterates the benefits of using `styleUrls` for better code maintainability and advises avoiding the `Styles` array for large or complex stylesheets. They encourage the viewer to ask questions if needed and conclude the lecture.
Mindmap
Keywords
💡View Template
💡Styles Array
💡styleUrls
💡Component
💡CSS
💡Curly Braces
💡Anchor Element
💡Class Selector
💡Disadvantages of Styles Array
💡Component-specific Styles
Highlights
Introduction to styling a view template in Angular using the 'Styles' and 'styleUrls' properties.
The 'Styles' property allows you to define inline CSS for elements within the view template using an array.
Example of removing underlines from anchor elements and adding margin between them using inline CSS in the 'Styles' property.
Demonstration of adding padding to a button element by defining styles for the button tag within the 'Styles' array.
Usage of class selectors (e.g., '.ecat-header') and ID selectors for styling elements in the view template.
Disadvantages of the 'Styles' array include mixing CSS with TypeScript code, lack of compile-time error checking, and poor maintainability for large CSS code.
Introduction to the 'styleUrls' property as an alternative to 'Styles' to maintain CSS in a separate file, improving maintainability.
Creation of a separate CSS file (header.component.css) and linking it to the header component using 'styleUrls'.
Demonstration of how CSS in the linked file applies only to the view template of the associated component (header component).
Illustration of the scope of styles in Angular, showing that styles applied in one component do not affect child components or other components.
Comparison of Angular's component-scoped styling with React, where parent component styles can affect child components.
Example of adding a button in the parent 'App' component and styling it independently from the button in the 'Header' component.
Explanation that styles defined in one component (e.g., app.component.css) do not apply to child components like the header.
Removal of the test CSS and button element used in the demonstration, returning the code to its original state.
Conclusion and summary of the key differences between 'Styles' and 'styleUrls' for managing CSS in Angular.
Transcripts
in the last lecture we learned what is a
view template and what are the different
ways in which we can create a view
template for a component now in this
lecture we are going to learn how we can
style the HTML of a view template
so here we have our header component and
for this header component this header
component.html file is its view template
so wherever we will use this app header
selector there the content of this
header component.html file will be
rendered so if I go to the web page
you can see the HTML of that file has
been rendered and it looks something
like this now currently this HTML is not
styled so in this lecture we are going
to learn how we can style this HTML
so let's go back to vs code
and in order to style a view template
to this metadata object we can specify
another property called Styles or style
urls
so let's first talk about Styles
property
so using this property we can style our
view template now to this Styles
property we need to assign an array and
inside this array we can Define the
style for different HTML elements for
example if I go to this header
component.html
there we have this anchor element So
currently if I go to the web page you
see these anchor elements these links
are underlined but I don't want this
underline for each of these links and I
also want to add some margin between
these links
so let's go ahead and let's do that for
that what we will do is
inside this array we will specify a
string using single quotes like this and
in there we will specify the HTML
element which we want to style here we
want to style the anchor element
and after that we'll specify a set of
curly braces like this and inside this
we can specify the CSS Styles so the
first thing which I want to do is I want
to set the text decoration To None I
don't want the underline for these links
okay then I can use semicolon and then I
can specify another style so I will set
margin top bottom I will set 0 pixel and
left right 10 pixel
let's see if the changes let's go back
to the browser
and now you will see those links are not
underlined anymore and there is a margin
between these links
in the same way here we also have a
button element and for this button
element we don't have any value right
now but what I want is for this button
element I want to add some padding so I
can go back
and
this style is for anchor element after
this style we can add a comma
and we can again use a set of single
quotes like this and in there we can
specify the style for some other element
in this case now we want to specify the
style for button element so after the
element name we use a set of curly
braces and in there we can specify the
style so here I will simply add some
padding
maybe top bottom 10 pixel and left right
20 pixel
okay
save the changes let's go back to the
web page
and you can see that styling has been
added on this button element
so this is how you can style your HTML
elements using Styles array in the
Styles array you specify the styles for
HTML element like this so here first we
are specifying the style for anchor
element then when we wanted to style
some other element we used a comma again
we specified single quotes and inside
that we are specifying the style for
button element
now let's say I also want to style this
div
and for this div the class is ecat
header so using this class I want to
style this div let's see how we can do
that I'll copy this class name let's go
back
and again after this style after we have
styled this button element let's use
comma let's use another set of single
quotes and now I want to style an
element whose class is ecat header so
when we want to style an element using
its class name first we need to use a
DOT and then we specify the class name
and then a set of curly braces like this
and in there we specify the CSS Styles
so here let's say I want to set the
width maybe to 100 percent and I want to
set the height let's say to
70 pixel okay so this is how we can
style an element using its class name
then if you want to style an element
using its ID
then what you need to do is you need to
use a pound sign you need to specify the
ID of the element and then you can
specify the style for that
so I hope you got the point so this is
how we can style our view template using
this Styles array
now here using this Styles array we have
a lot of disadvantage the first
disadvantage is that we are mixing CSS
with typescript code and that is not a
good practice
second disadvantage is that since these
values are string values here if we miss
something for example here if I miss
this colon it is not going to show any
error so in this case we are not going
to have any compile time error we will
come to know about these errors these
issues only during runtime so this is
another problem
and third currently we have written CSS
Styles only for three elements for this
anchor element for this button element
and for the div element whose class is
ecat header
but if we have to write a lot of CSS in
that case this array will become huge
and it will be less maintainable and it
will just make our code a lot Messier
and we don't want that right so what are
the disadvantages we have with this
tiles array
first of all it mixes in CSS and
typescript code which makes the code
less maintainable
then since CSS is written as a string
using the Styles property if there is
some error we will not know about it
during compile time we will only come to
know about it during runtime and then if
the number of lines of CSS code is huge
in that case it will become Messier and
less maintainable
and that's why instead of using Styles
array what we can do is we can use style
urls
so here apart from this Styles property
we also have another property called
style URLs so let me remove this style
from here
and instead of style we can use
style urls
and the style URLs it is also an array
but inside this array instead of writing
CSS code what we do is we specify the
path of a CSS file which can be used for
the view template
so what I will do here is inside this
header folder I'll create a new file
and again the name of the file should be
the component name in this case header
Dot component dot extension of the CSS
file is dot CSS
okay so here we have created header
component.css file and inside this file
we will write all the CSS which we want
to apply on our view template
and we will reference this file using
this style URLs property so in this
array we can specify a string value like
this and in there we specify the path of
the CSS file which we want to use as a
style sheet so in the current directory
we have this header dot component dot
CSS file
okay
now here we are only using one CSS file
for the style sheet but if you want you
can use multiple CSS files all you have
to do is you have to use comma and then
you have to specify the path of another
CSS file which you want to use here
but here I only want to use one CSS file
so I will specify that
and now whatever CSS we write inside
this file that will be applied to this
HTML file okay so for this component
this header component this file is its
view template and this file is its style
sheet okay so whatever CSS Styles we
write here inside this file that will be
applied to the HTML of this file
now in order to save some time
I have already written some CSS so I'll
grab it from here
okay let's go back to vs code and let's
paste it inside this header
component.css file
so you see this much of CSS I have
written just for header so if we would
have been using Styles array instead of
style URLs that array would have become
quite lengthy and less maintainable
that's why instead of using Styles
property we are using style URLs and
there we are simply specifying the path
of the file and we are writing all our
CSS in a separate file
let's save this file
and now what will happen is these CSS
styles that will be applied to the HTML
of header component.html file so now if
we go to the browser
this is how our application now looks
like here we have created a header in
that header we have some links we have a
search bar and we have a button now this
header is not yet styled properly that's
because in the next lecture we are also
going to apply some Global styles to our
component currently what is happening is
whatever style we have specified inside
this header component.css that style
will be only applied for header
component.html
this style will not be applied on any
other HTML file
and this is very important to understand
in angular when you use style URLs
property or Styles property and using
that whatever Styles you apply that only
gets applied to that particular view
template
in this case whatever style sheet you
use here those Styles will only get
applied to the view template of this
header component these Styles will not
get applied to any other component
if any other component is using the same
CSS file then only those Styles will be
applied to that component
but in this case since we are using this
CSS file only for this header component
this style will only be applied on this
header component it will not get applied
to any other component not even the
child component of this header component
okay so if you have worked with react
then you know that in react when you
apply some styles on the parent
component those Styles will also get
applied to its child components but
that's not the case here let me actually
show you that so what I will do is I
will go to app component.html
and in there I will add a button element
okay here let me simply say click me
so here I have this button element and
this header component it is the child
component of app component
right now if I go to this app
component.css and if I add some CSS
style for the button
maybe I will simply say
background color should be red for all
the buttons inside this app component
then we also have the button element in
our header component so if I go to
header component.html here also you have
the button element and this header
component it is basically a child
component of this app component
so when I'm specifying some styles for
the button element in the app component
what do you think will it get applied to
the child components button element also
let's see that let's save the changes
let's go back to the web page
and there you will see we have this
button element and this button element
is coming from App component and there
the background color of this button
element is red
but here also we have a button element
but this button elements background
color has not changed
and that's what I meant when I said that
whatever style we specify for a
component using Styles property or style
URL property
in this case for this app component we
are specifying the style using app
component.css file so whatever style we
will specify inside this app
component.css file that style will only
get applied to the HTML file of that
component
that style will not get applied to any
other HTML in this case the style which
we have specified here inside this app
component.css it is only applicable on
app component.html this style for this
button element is not applicable on
header component.htmls button
okay
all right so let me go ahead and let me
remove this CSS style from here let's
close this file
and let's also remove this button
element from here
all right
so in this lecture we learned how we can
style our view template using Styles
property or style URLs property
dissolve from this lecture if you have
any questions then feel free to ask it
thank you for listening and have a great
day
Weitere ähnliche Videos ansehen
Sintassi del Primo Programma - React Tutorial Italiano 04
#12 Create Component using Angular CLI | Angular Components & Directives | A Complete Angular Course
Images and Styles | Mastering React: An In-Depth Zero to Hero Video Series
Learn CSS in 20 Minutes
#13 Types of Component Selector | Angular Components & Directives | A Complete Angular Course
Important Keyword in CSS Explained | Frontend Bootcamp Hindi | Ep.12
5.0 / 5 (0 votes)