HomeНаука и техникаRelated VideosMore From: kudvenkat

Styling angular 2 components

310 ratings | 105113 views
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/06/styling-angular-2-components.html Slides http://csharp-video-tutorials.blogspot.com/2017/06/styling-angular-2-components_13.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists 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" Option 1: Specify the following table and td styles in external stylesheet - styles.css 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. 2. Since styles.css is referenced in index.html page, these styles may affect the table and td elements in other components, and you may or may not want this behaviour. 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.
Html code for embedding videos on your blog
Text Comments (34)
Nazish Ejazi (12 days ago)
nice explanation
Ami Dalwadi (2 months ago)
thank you for uploaded this video.. :)
Sakshi Singh (3 months ago)
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
Joseph Regallis (4 months ago)
Chrome is not showing border in Windows 10 Pro. IE works fine.
Bhargav Beemagouni (7 months ago)
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?
Gregor Slana (8 months ago)
i cannot get style to work inside templates, it only works if I put them on to main styles.css file. Anyone had the same problem?
sai sreenivas (9 months ago)
plz can you make videos on nodejs and mongodb
Rohit Shukla (10 months ago)
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.
Nidhi Tiwari (10 months ago)
Such ease and beauty.....I really admire you a lot ,sir.
Sridhar Reddy (1 year ago)
Hello Venkat Nice session, I am facing an issue in styles. The styles are not effecting when I keep styles in separate css file.
Dead Man (1 year ago)
this is the best video series, on the internet for angular2.
Wonderful Sessions. Thanks a lot.
Mahendra Verma (1 year ago)
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.
Kunal Dedhia (1 year ago)
Try setting your startup page
Johan Byrén (1 year ago)
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!
Sreenivasulu Gattu (1 year ago)
Thanks for your videos. Could you please explain how to USE LESS/SASS ?
Harinath (1 year ago)
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.
you can keep your component name anything, for coding standard we can keep like that and it is easy to understand at later point of time
i m lazyy (1 year ago)
having css for each component,, wil increase the no of requests and responses every time a components loads.. this will make web-app slow.>> this is my thought.. is it correct?
Milind D (1 year ago)
Can we use LESS or SASS to style
Raman Mittal (1 year ago)
we can also specify style url in template
sandip mandal (1 year ago)
Thanks for describe all the advantage and disadvantage
David Donadze (1 year ago)
nice man
Puspendra Awasthi (1 year ago)
Very nyc explanation good job sir... Please upload more Videos on remaining topics..
Stanley Akachukwu (1 year ago)
nice video!
Plam Ivanov (1 year ago)
for development stylesUrls , and for release combine the styles in one css file.
Rachit Jain (1 year ago)
Thank You Sir :)
Tan YEW MENG (1 year ago)
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 ???
Deepak Samantaray (11 months ago)
I guess, If some other component import the Employeecomponent and overrides the css (or has his own css), he has reused the component without the syles.
RAQIBUL ALAM RASHED (1 year ago)
The world is still beautiful because of some people like you.
Taher hendawi (1 year ago)
simply great :) you are the BEST :) waiting for the new video.
Yakoob Hammouri (1 year ago)
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
rammohan ponnuru (1 year ago)
More on Angular 2 please waiting
Top 10 List (1 year ago)
you are Great Sir ...... Please Upload video Series of SAAS after it,,, Thank you

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.