#09 Styling View Template | Angular Components & Directives| A Complete Angular Course

Summary

This 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

00:00

📚 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.

05:03

🎨 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.

10:05

📏 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.

Keywords

💡View Template

A View Template in Angular refers to the HTML code associated with a component. It defines how the component's layout and content are structured. In the video, the header component's view template is described as the `header.component.html` file, and it's rendered whenever the `app-header` selector is used.

💡Styles Array

The Styles Array is a property in Angular's component metadata used to directly define CSS styles within the component's TypeScript file. It allows developers to add CSS rules inline for specific elements. The video explains that while this method allows for immediate styling, it has several disadvantages such as mixing CSS with TypeScript, making the code less maintainable.

💡styleUrls

The `styleUrls` property allows Angular developers to link external CSS files to a component. This method enhances maintainability by keeping the CSS code separate from TypeScript. The video highlights that instead of embedding styles directly using the Styles array, it’s better to reference external files using `styleUrls`, improving code organization.

💡Component

In Angular, a Component is a building block that contains a template (HTML), logic (TypeScript), and styles (CSS). The header component is the primary example in the video, and its view template, style, and behavior are encapsulated in files like `header.component.html`, `header.component.css`, and the component’s TypeScript file.

💡CSS

Cascading Style Sheets (CSS) is a language used to style HTML elements. In the video, CSS is applied to the view template either through the Styles array or by linking external files via `styleUrls`. For example, CSS rules are created to remove the underline from anchor links and to set margins between them.

💡Curly Braces

Curly Braces `{}` are used in CSS to encapsulate style declarations. In the video, these braces are mentioned when the speaker shows how to apply CSS styles inside the Styles array for specific elements such as anchor tags and buttons.

💡Anchor Element

An anchor element (`<a>` tag) is used to create hyperlinks in HTML. The video shows how to style anchor elements within the header component’s view template, removing the default underline and adjusting margins through CSS.

💡Class Selector

A Class Selector in CSS is used to apply styles to elements with a specific class. In the video, the speaker explains how to style an element by targeting its class, such as styling the div element with the class `ecat-header` using the format `.ecat-header {}`.

💡Disadvantages of Styles Array

The Styles array, while useful, comes with drawbacks. The video outlines three main disadvantages: 1) It mixes CSS with TypeScript, 2) Errors are not caught until runtime, and 3) It becomes unmanageable when there are many styles. These factors make it less preferable compared to `styleUrls`.

💡Component-specific Styles

Component-specific Styles in Angular mean that styles defined within a component only affect that component's template. The video emphasizes this point by explaining how styles in the `header.component.css` apply only to the header component and do not affect other components or child elements.

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