Styling angular 2 components

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss the different options available to apply styles to Angular Components.

The following are the different options available to style this "employee component"

table {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border-collapse: collapse;
}

td {
border: 1px solid black;
}

Advantages :
1. Visual Studio editor features (Intellisense, Code completion & formatting) are available.
2. Application maintenance is also easy as we only have to change the styles in one place if we need to change them for any reason.

Disadvantages :
1. The Stylesheet that contains the styles must be referenced for the component to be reused.

Option 2 : Specify the styles inline in the component HTML file as shown below.

[table style="color: #369;font-family: Arial, Helvetica, sans-serif;
font-size:large;border-collapse: collapse;"]
[tr]
[td style="border: 1px solid black;"]First Name[/td]
[td style="border: 1px solid black;"]{{firstName}}[/td]
[/tr]
[tr]
[td style="border: 1px solid black;"]Last Name[/td]
[td style="border: 1px solid black;"]{{lastName}}[/td]
[/tr]
[tr]
[td style="border: 1px solid black;"]Gender[/td]
[td style="border: 1px solid black;"]{{gender}}[/td]
[/tr]
[tr]
[td style="border: 1px solid black;"]Age[/td]
[td style="border: 1px solid black;"]{{age}}[/td]
[/tr]
[/table]

Advantages :
1. Visual Studio editor features (Intellisense, Code completion & formatting) are available.
2. Component can be easily reused as the styles are defined inline
3. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application.

Disadvantages :
1. Application maintenance is difficult. For example, if we want to change the [td] border colour to red we have to change it in several places.

Option 3 : Specify the styles in the component html file using [style] tag as shown below

[style]
table {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border-collapse: collapse;
}

td {
border: 1px solid black;
}
[/style]
[table]
[tr]
[td]First Name[/td]
[td]{{firstName}}[/td]
[/tr]
[tr]
[td]Last Name[/td]
[td]{{lastName}}[/td]
[/tr]
[tr]
[td]Gender[/td]
[td]{{gender}}[/td]
[/tr]
[tr]
[td]Age[/td]
[td]{{age}}[/td]
[/tr]
[/table]

Advantages :
1. Component can be easily reused as the styles are defined inline with in the component itself
2. Application maintenance is also easy as we only have to change the styles in one place
3. Visual Studio editor features (Intellisense, Code completion & formatting) are available
4. Styles specified using this approach are local to the component and don't collide with styles used elsewhere in the application.

Option 4 : Specify the styles in the component TypeScript file using the @component decorator styles property as shown below. Notice the styles property takes an array of strings containing your styles.

[raqibul]

The world is still beautiful because of some people like you.

[kaushit]

i can't able to stop myself to appreciate the work of this guy, excellent work 🙌, even a new born baby can easily understand this series that much of simplicity he able to put in this series. SIMPLICITY at it's PEAK ❤.

[NidhiTiwari-tyms]

Such ease and really admire you a lot, sir.

[taherhendawi]

simply great :) you are the BEST :) waiting for the new video.

[xburrex]

The best option most be styleUrls: [ ]. Cant see the benefits with the other options. This makes styling easy and you will not have a 6000 row css-file to handle later in the project. Great content. Thx!

[yakoobhammouri]

Thank you for this perfect explanation, I set general style in File and use it in Layout, and set specific CSS for Components in CSS file and using by styleUrls property, this is what I use, please correct me if I miss anything

[TopList-tmun]

you are Great Sir Please Upload video Series of SAAS after it, , , Thank you

[sujoy]

Thanks for describe all the advantage and disadvantage

[ymtan]

Dear Venkat, I don't really understand what do you mean "Component can be easily reused as the styles are defined inline with in the component itself" Could you kindly elaborate on this point ???

[sridharreddy]

Hello Venkat Nice session, I am facing an issue in styles. The styles are not effecting when I keep styles in separate css file.

[bhargavbeemagouni]

Hi Venkat,
I have one doubt if Angular 2 is implemented using Typescript or ECMA script mostly
then can we call it as Javascript Framework
else
Typescript or ECMA script Framework?

[sakshisingh]

Thanks for the video, please let me know how to give more than one style URL in style property of @Component and how to use styles of parent component in their child components

[rohitshukla]

i am not able to apply style inline in component html file. Through external styles.css file it is working fine but when i am applying through component html file it is not reflecting in browser . Please help.

[puspendraawasthi]

Very nyc explanation good job sir...
Please upload more Videos on remaining topics..

[mahendraverma]

I have installed the startup project for angular as you have suggested. It was working perfectly. I was following your tutorials. At tutorial 7, I was getting the error "HTTP Error 403.14 - Forbidden". There may some my error. Please help me to fix it.

[Harry_hum]

Is it mandatory to keep the word 'component' (ex: emp.component.css) in each page name?If yes, any reason for that?
Appreciate the effort and thanks a ton for your videos.

[sreenivasulugattu]

Thanks for your videos.
Could you please explain how to USE LESS/SASS ?

[josephregallis]

Chrome is not showing border in Windows 10 Pro. IE works fine.

[dullidddd]

we can also specify style url in template

[saisreenivas]

plz can you make videos on nodejs and mongodb